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
$.ajax({
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.
Comments (9)
- Hemant panchalalmost 6 years agoReply
Thanks a lot. You are a Lifesaver :) Nice work.
- Varysover 5 years agoReply
How to access the extra parameters that was added in php? Like in your example, how to access 'user_id'?
- Agrawalover 5 years agoReply
I am unable to get form_data in upload_avatar file so please tell me how to get it ?
- Deepali guptaover 4 years agoReply
Thanks...now my project is almost complete which was in pending since last few week.
- Tamabout 4 years agoReply
if you want post a status like Facebook with this source code. How to post a status(textarea not
) and images using ajax? - Olehalmost 4 years agoReply
Thanks. It helped me a lot.
- Lal kumar raiabout 3 years agoReply
I have multiple images and tried to upload using FormData without submiting form. And when i console.log FormData values using entries method it shows the images object too. But the problem is when i send using ajax , and when i try to print_r the request datas, it shows empty. I am using laravel 5.5 and i am not being able to upload the images. Can you guide me ?
- Nimsalmost 3 years agoReply
Thanks. It worked for me.
Bad solution, because it doesn't work in IE < 10
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).
Post a Comment