ajax file upload

Question

I am struggling to get a file uploaded, processed and displayed without reloading the page. What do I use for jquery to get the file posted to the server properly?

 <html>

 <body>

 <form action="upload.php" method="post" enctype="multipart/form-data" id="uploadform">
  <label for="file">Filename:</label>
  <input type="file" name="file" id="file" /> 
  <br />
  <input type="submit" id="submit" />
  </form>

  </body>
  </html>

Yes i can get it uploaded with the php script. But running the php through a jquery method to get a response and replace like $(#response).html(response) is not working. it looks like the file is never uploaded, i just get errors on the $_FILE array — Clay Smith, Jun 30 '11 at 21:18

score 3 · Accepted Answer · answered Jun 30 '11 at 21:42

You can do it by putting the upload form in an iframe and communicating between the main window and the frame with javascript. It's ugly but it's the only way to do it in some browsers.

jQuery File Upload is an awesome plugin that incorporates async XHR uploads and falls back on an iframe for browsers that are not capable. It also supports drag and drop (for capable browsers) out of the box. It's not the simplest plug-in in the world to use, but well worth the effort, it covers all the bases.

score 0 · Answer 2 · answered Sep 18 '12 at 06:52

You can upload a form containing INPUT[type="file"] without reloading the page by using jquery.upload.js. In the $.Deferred.done handler you can add your own code to display the server response.

$.upload( form.action, new FormData( myForm))
.progress( function( progressEvent, upload) {
    if( progressEvent.lengthComputable) {
        var percent = Math.round( progressEvent.loaded * 100 / progressEvent.total) + '%';
        if( upload) {
            console.log( percent + ' uploaded');
        } else {
            console.log( percent + ' downloaded');
        }
    }
})
.done( function( data) {
    console.log( 'Finished upload');

    // add your code for rendering the server response
    // into html here
});

You can get it here : https://github.com/lgersman/jquery.orangevolt-ampere/blob/master/public/lib/ampere/jquery.upload.js

score 0 · Answer 3 · answered Jun 30 '11 at 21:18

Using vanilla HTML, it is impossible to upload a file over an AJAX request. Take a look at something along the lines of SWFUpload. You can upload multiple files, specify wildcard filters for file section, and have the ability to display progress bars and other status information during the upload.

ajax file upload

3 Answers3

Linked