Categories
ajax asynchronous javascript jquery xmlhttprequest

How can I upload files asynchronously with jQuery?

3091

I would like to upload a file asynchronously with jQuery.

$(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: ");
            }
        });
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

7

294

2019 Update: It still depends on the browsers your demographic uses.

An important thing to understand with the “new” HTML5 file API is that it wasn’t supported until IE 10. If the specific market you’re aiming at has a higher-than-average propensity toward older versions of Windows, you might not have access to it.

As of 2017, about 5% of browsers are one of IE 6, 7, 8 or 9. If you head into a big corporation (e.g., this is a B2B tool or something you’re delivering for training) that number can skyrocket. In 2016, I dealt with a company using IE8 on over 60% of their machines.

It’s 2019 as of this edit, almost 11 years after my initial answer. IE9 and lower are globally around the 1% mark but there are still clusters of higher usage.

The important take-away from this —whatever the feature— is, check what browser your users use. If you don’t, you’ll learn a quick and painful lesson in why “works for me” isn’t good enough in a deliverable to a client. caniuse is a useful tool but note where they get their demographics from. They may not align with yours. This is never truer than enterprise environments.

My answer from 2008 follows.


However, there are viable non-JS methods of file uploads. You can create an iframe on the page (that you hide with CSS) and then target your form to post to that iframe. The main page doesn’t need to move.

It’s a “real” post so it’s not wholly interactive. If you need status you need something server-side to process that. This varies massively depending on your server. ASP.NET 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…

3

  • 144

    For the record it’s now possible to do pure AJAX file uploads if the browser supports the File API – developer.mozilla.org/en/using_files_from_web_applications

    – meleyal

    Mar 25, 2011 at 10:05

  • this is quite an old answer, but it was a bit misleading.. IE supported XHR natively as far back as IE7, and supported it through ActiveX as far back as IE5. w3schools.com/ajax/ajax_xmlhttprequest_create.asp. The practical way of doing this was certainly targeting flash (shockwave) components, or rolling out a Flash/ActiveX (Silverlight) control. If you can originate a request and handle the response via javascript, it’s ajax.. though, having said that, ajax is synonymous with xhr, but it doesn’t itself describe the underline mechanism/components that delivers/exchanges the payload.

    Oct 29, 2015 at 14:54

  • 4

    @BrettCaswell I wasn’t saying that AJAX/XHR weren’t possible, just that it wasn’t possible to post a file up with them on old —but everliving— versions of IE. That was and remains completely true.

    – Oli

    Oct 29, 2015 at 15:34


116

I recommend using the Fine Uploader plugin for this purpose. Your JavaScript code would be:

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

2

  • 36

    “This plugin is open sourced under GNU GPL 2 or later and GNU LGPL 2 or later.” So as long as you don’t distribute the copy or a modified version, you don’t have to open your project.

    Jul 23, 2012 at 12:02

  • 1

    In case anyone tries to go this route, FineUploader was discontinued in 2018. github.com/FineUploader/fine-uploader/issues/2073

    Jul 29, 2021 at 0:50