How can I upload files asynchronously with JQuery?

Question

I would like to upload a file asynchronously with JQuery. This is my HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

And here my javascript:

$(document).ready(function() {
    $("#uploadbutton").click(function() {
        var filename = $("#file").val();
        $.ajax({ 
        type: "POST",
        url: "addFile.do",
           enctype: 'multipart/form-data',
           data: {file: filename},
          success: function(){
               alert( "Data Uploaded: ");
            }
        });  
    });
});

Instead of the file being uploaded, I am only getting the filename. Help?

Current Solution

I am using to upload files the jQuery Form Plugin

Answer 1

And does it work?

Here is a Tutorial...

Answer 2

You cannot upload files using XMLHttpRequest (AJAX).

You can simulate the effect using an iframe of Flash.

Try this SWF (Flash) uploader : http://www.swfupload.org/documentation

Or this excellent jQuery forms plugin that posts your files through an iframe to get the effect :

Answer 3

You cannot do AJAX file uploads. They're not supported but you can fake it.

If you create a iframe on the page (that you can hide with CSS), you can target your form to post to that iframe.

Because it's a real post, it's not wholly interactive so you'd need to look at requesting the progress of the current upload from your server. This varies massively depending on your server. ASPNET has nicer mechanisms. PHP plain fails but you can use Perl or Apache modifications to get around it.

If you need multiple file-uploads, it's best to do each file one at a time (to overcome maximum file upload limits). Post the first form to the iframe, monitor its progress using the above and when it has finished, post the second form to the iframe, and so on.

Or use a Java/Flash solution. They're a lot more flexible in what they can do with their posts...

Answer 4

There's various ready-made plugins on doing file upload on jquery.

Doing this kind of uploading hacks is not an enjoyable experience, so people enjoy using ready-made solutions.

Here's few:

• Ajax File Upload Plugin
• Multiple File Upload Plugin

You can search more from jquery's plugin -site.

Answer 5

A solution I found was to have the <form> target a hidden iFrame. The iFrame can then run JS to display to the user that it's complete (on page load).

Answer 6

I recommend using jsupload plugin for this purpose. Your javascript would be:

$(document).ready(function() {
$("#uploadbutton").jsupload({ 
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }   
});

Answer 7

I wrote a blog about this very subject. It's only about 5 lines of Javascript, if you use the lightweight jQuery-form plugin.

Answer 8

I also wrote a blog post about this very subject, but mine is for ASP.NET MVC as the server side platform.

Answer 9

You can also try this - no Flash needed.

Answer 10

This plugins lets you post any form asynchronously through an iframe: http://trentrichardson.com/2009/06/05/meet-jquery-iframer/

Answer 11

There's is the link for your jquery iframe uploader in php and javascript

Enjow!

http://www.phpletter.com/download%5Fproject%5Fversion.php?version%5Fid=6

Answer 12

Well a simple way to do that is here. Documentation and plugin download: http://pixelcone.com/jquery/ajax-file-upload-script/

Answer 13

Please try with http://casonclagg.com/articles/6/video-tutorial-uploadify-asp-net-c-sharp.aspx