Uploading Files/Image With Ajax & Jquery, Without Submitting A Form

Here is the code for uploading an image or file without submitting a form with Ajax. For this we will create object of FormData class and will append the properties of the file field in a attribute of FormData object, finally we will set the FormData object with the data key of ajax method of JQuery.
<input id="avatar" type="file" name="avatar" />
<button id="upload" value="Upload" />
$(document).on("click", "#upload", function() {
	var file_data = $("#avatar").prop("files")[0];   // Getting the properties of file from file field
	var form_data = new FormData();                  // Creating object of FormData class
	form_data.append("file", file_data)              // Appending parameter named file with properties of file_field to form_data
	form_data.append("user_id", 123)                 // Adding extra parameters to form_data
                url: "/upload_avatar",
                dataType: 'script',
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,                         // Setting the data attribute of ajax with file_data
                type: 'post'
We can get the parameters of file field by accessing the "file" key of the parameters hash. Sorry to say, but the FormData class is not supported in IE. :( If you are looking for a solution that works on all browsers have a look at Upload image without submitting form, works on all browsers.

(7) Comments

  • M

    Massimo_indie   over 4 years ago

    Bad solution, because it doesn't work in IE < 10

    • J

      Jerome   about 4 years ago

      also, very bad browser who never follow the international convention but sale his shit (it s a shame).
      the great solution his to definitively ignore ie and ever said that you need chrome or firefox (it's better more and free).

  • H

    Himanshu   about 2 years ago

    great work

  • H

    Hemant panchal   almost 2 years ago

    Thanks a lot. You are a Lifesaver :) Nice work.

  • V

    Varys   over 1 year ago

    How to access the extra parameters that was added in php? Like in your example, how to access 'user_id'?

  • A

    Agrawal   over 1 year ago

    I am unable to get form_data in upload_avatar file so please tell me how to get it ?

  • D

    Deepali gupta   5 months ago

    Thanks...now my project is almost complete which was in pending since last few week.

  • T

    Tam   about 2 months ago

    if you want post a status like Facebook with this source code. How to post a status(textarea not ) and images using ajax?