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.

Ishank Gupta

Related articles

Our two bytes give the latest technology trends and information that gives you fair information about the subject.

Top 10 Most Popular CMS Platforms for Website Development

There is no doubt about it: technology keeps changing, and it has the ability to make things easier for humans. Website development is the need of ...

How to Develop a React Micro Front-End App? A Complete Guide

It is no secret that disassembling the issue is the best way to address any software issue. There are several ways to achieve this, including by r...

Top 5 Reasons to Choose Web App Development

The creation of web applications has advanced greatly from the creation of static web pages and now includes interactive capabilities that mimic th...

We use cookies to deliver the best possible experience on our website. To learn more, visit our Privacy Policy. Please accept the cookies for optimal performance. Cookie Notice.

Accept Reject