POST form with jQuery AJAX when input is a file

Question

I have several areas where I use AJAX to send text fields.

var name = $("input#name").val(); $.ajax({ type: "POST", url: "bin/process.php", data: "&name=" + name, success: function() { //handle response here } }); 

However, I cannot figure out how to do this if the input type is a file? Performance

var name = $("input#file").val(); doesn't seem to work.

Answer 1

By default, jQuery cannot post through AJAX if it contains a download field.

You can try this plugin: http://jquery.malsup.com/form/

Answer 2

This is usually done using an iFrame to send the file to the server.

JQuery Form Plugin is a great resource for this.

Here is another upload script that, when possible, uses xhr (FF, Safari) and gracefully crashes into an iFrame if necessary (IE)