AJAX file upload/form submit without jquery or iframes?

Question

Is it possible to do an AJAX form submit without jQuery or IFrames (so just pure JavaScript)? I'm currently sending to a struts fileUploadAction that works. Would the action's code still work with the asynchronous submit, or are there additions required to pick up the async form submit?

I am using struts 1.x and current my form is:

<html:form action="fileUploadAction" method="post" enctype="multipart/form-data">
    ...form elements...
    <html:file property="theFile" />
    ...other elements...
</html:form>

Can this form be submitted, and thus the file uploaded with AJAX?

I've seen that I need to either create a XMLHttpRequest or an ActiveXObject for browser compatibility, any chance of an example of the JavaScript? — edwardmlyte, Jul 16 '12 at 15:14
Browsers that support ActiveXObject do not support file upload so good luck getting them to work. — epascarello, Jul 16 '12 at 15:18
Yeah, looks to me like I have to use IFrames. example: http://www.openjs.com/articles/ajax/ajax_file_upload/ — edwardmlyte, Jul 16 '12 at 15:23
@edwardmlyte, just being curious, while `jquery` is the most popular and standard library for cross browser implementation of `JS`, why you need pure javascript solution that might not be compatible everywhere? — Furqan Hameedi, Jul 19 '12 at 06:56
Good question. Simply put, company policy. Why bring in an external library if you can manage without (regardless of ease). — edwardmlyte, Jul 19 '12 at 07:34
Ajax file uploader without iframe and all browsers comptible, impossible. — korko, Jul 19 '12 at 16:17
@edwardmlyte "Why bring in an external library if you can manage without (regardless of ease)?" Because you'd be a fool not to. You *can* have your employees build their own desks out of raw materials before they start doing anything useful. But why would you do it just "because you can manage without pre-built desks"? Does your company enjoy spending money for its own sake or something? :) — ErikE, Jul 26 '12 at 00:30

score 14 · Accepted Answer · edited May 23 '17 at 10:28

If I understood you correct, you can use the following code to upload the file async. Modify it as you like

var AjaxFileUploader = function () {
    this._file = null;
    var self = this;

    this.uploadFile = function (uploadUrl, file) {
        var xhr = new XMLHttpRequest();
        xhr.onprogress = function (e) {
            ...
        };

        xhr.onload = function (e) {
            ...
        };

        xhr.onerror = function (e) {
            ...
        };

        xhr.open("post", uploadUrl, true);

        xhr.setRequestHeader("Content-Type", "multipart/form-data");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);

        xhr.send(file);
    };
};

AjaxFileUploader.IsAsyncFileUploadSupported = function () {
    return typeof (new XMLHttpRequest().upload) !== 'undefined';
}

 if (AjaxFileUploader.IsAsyncFileUploadSupported) {
        ajaxFileUploader = new AjaxFileUploader();

        $("form").submit(function () {
            var uploader = $("#fileUploader")[0];

            if (uploader.files.length == 0) {
                return;
            } else {
                ajaxFileUploader.uploadFile(
                    "/YourUploadUrl",
                    uploader.files[0]);
            }

            return false;
        });
    }

To upload the form use the FormData class, populate it with form values and post it with XHR.

Update: For HTML4 try the following

i assume that this solution will work only in HTML5 supported browsers, correct me if i am wrong, so if browser doesn't support it then you have to provide a fallback method which will be using iframes i guess — Saket Patel, Jul 19 '12 at 07:22
Yeah. I'm starting to think there isn't a non-HTML5 and non-IFrames route. — edwardmlyte, Jul 19 '12 at 07:33
Yes, this solution will work in HTML5 only. Try to find some polyfill for the FileUploader. I looked here https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills, but seems like there is no file uploader replacer. In any case I think it will not take much time to rewrite the code above to work in HTML4 — Madman, Jul 19 '12 at 07:44

score 3 · Answer 2 · edited Sep 02 '15 at 10:57

3

http://fineuploader.com/ is a ajax file-uploader.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

edited Sep 02 '15 at 10:57

edwardmlyte

15,937
23
58
83

answered Jul 20 '12 at 17:01

paulslater19

5,869
1
28
25

Looks like this has been moved and now requires you to purchase a licence (at least for a commercial licence) – paulslater19 Oct 25 '13 at 08:33
It's moved to fineuploader now (I've updated the link). And still a licensed service. – edwardmlyte Sep 02 '15 at 10:58
@edwardmlyte Thanks mate – paulslater19 Sep 02 '15 at 15:56

score 0 · Answer 3 · answered Mar 15 '22 at 02:19

The up-to-date (march 2022), pure js solution, can be found in here. Summary:

You can use fetch optionally with await-try-catch

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

score -6 · Answer 4 · answered Sep 02 '15 at 10:39

No need to add jquery or any other third party library, just add IPerfect JS library and you are good to go.

IP_uploadFile(URL,responseType,this[object],[dynamicFunctionForResponse])

if user select responseType as 'html' then dynamicFunctionForResponse will get response in HTML format. In below example you will get 'done' response in alert.

HTML

    <script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>


    <script language='javascript'>
    function testResponse(data){
    alert(data)
    }
    </script>

Body

    <form method="POST" enctype="multipart/form-data"  onsubmit="IP_uploadFile('testupload.php','html',this,testResponse); return false;">
        <input type="file" name="file1">
        <input type="submit" name="submit1" value="Click here">
    </form>

PHP: testupload.php

    move_uploaded_file($_FILES['file1']['tmp_name'], realpath("./")."/upload/".$_FILES["file1"]["name"]);
    echo "done";

AJAX file upload/form submit without jquery or iframes?

4 Answers4

Linked