How to upload files using JQuery Ajax

Question

Possible Duplicate:
File Upload via AJAX within JQuery
How to easily upload files without form submission (with jQuery + AJAX)

I know for a fact that we can upload files using forms with enctype="multipart/form-data" but what i'm trying to figure out is upload files using Jquery Ajax..

Any tips?? Thanks in advance.

and of [jQuery Ajax File Upload](http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — Quentin, May 31 '12 at 16:15

score 0 · Answer 1 · answered May 31 '12 at 16:13

Try this jQuery plugin http://valums.com/ajax-upload/

Then use this javascript code

var uploader = new qq.FileUploader({
   // pass the element
   element: $(selector)[0],
   // path to server-side upload script
   action: '/server/upload'
});

For more info check the documentation

score 0 · Answer 2 · answered May 31 '12 at 16:15

0

I have used http://blueimp.github.com/jQuery-File-Upload/ in the past and it comes up with great demo(s) and documentation.

Check it out on https://github.com/blueimp/jQuery-File-Upload

answered May 31 '12 at 16:15

frictionlesspulley

11,070
14
66
115

score 0 · Answer 3 · answered May 31 '12 at 16:19

depends on your needs.

for single file,http://valums.com/ajax-upload/ is good enought

for multipla files upload + multi file selects you will need other technologies like flash or html5, you can check plupload or Uploadify

plupload supports flash, html5, silvernight html4 upload methods. and also support multi files select (except for html4)

uploadify supports flash and html5 for multi file selects

score 0 · Answer 4 · answered May 31 '12 at 16:21

The mentioned plugins are all useful but if you would like to know the logic behind the process its something like this:

Create a php file that handles uploading files and can return errors (echo).
Create an HTML page with your form and everything
Create a jquery function to :
- Avoid the form from being submitted
- create an ajax request to your php file you created in the first step
- show the result from the php file in a div.

score 0 · Answer 5 · answered May 31 '12 at 16:36

You need to use FormData object, but it will work only in newer browsers.

if (window.FormData) {
    $('input[type=file]').change(function() {
        var formdata = new FormData();
        var file = this.files[0];
        formdata.append("files[]", file);
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false
        });
    });
}

Some more info: https://developer.mozilla.org/en/XMLHttpRequest/FormData

You can also see lib with example HTML and some additional features: http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

For supporting older browsers, you can make iframe, clone file input element to the iframe and submit form there. In this way, page will not refresh and it will be AJAX-like.

How to upload files using JQuery Ajax

5 Answers5