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?

Answer 1

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