Multiple Files Upload Using Ajax

I'm working on a webapp and I'm using multiple files upload, but it doesn't work with AJAX. For multiple files upload i use the Apache FileUpload which is working perfectly but af

Solution 1:

You can prefer third party plugins to upload your multiple files to server

A few that i will recommend are

• Jquery File Upload

• uploadify

They support

multiple file upload.

progress bar

what to do after file has successfully uploaded

Image preview

Solution 2:

I used the following function for upload

$.upload = function(url, form, _callback) {
    $.ajax({
        url: url, 
        type: "POST", 
        processData:false,
        cache: false,
        async: true,
        data: form,
        contentType: false,
        success:function(data, textStatus, request){
            if(typeof _callback == "function")
                _callback.call(this, data);
        },
        error:function(data, textStatus, request){
            if(typeof _callback == "function")
                _callback.call(this, data);
        }
    });
};

To call this function

var formData = newFormData();
for(var i=0;i<$("#upload #file").get(0).files.length;i++)
   formData.append("file" + i, $("#upload #file").get(0).files[i]);


$.upload("Upload", formData, function(data){
    //success or failure check
});

Your HTML is

<form id="upload" style="display:none">
    <input name="file"id="file"type="file" multiple />
</form>

Solution 3:

like Dickens proposed , but the code is little differently formatted:

var formData = newFormData();
    var $uploader = $("#FileUpload_doc")[0];
    for (let i = 0; i < $uploader.files.length; i++)
        formData.append("file_" + i, $uploader.files[i]);

    $.ajax({
        url: 'your url here',
        processData: false,
        contentType: false,
        data: formData,
        type: 'POST'
    }).done(function (dataReceived) {
     // do another things here
    }).fail(function (a, b, c) {
        alert(a, b, c);
    });