Ajax file upload with jQuery

Javascript script to upload files to the server by Ajax, using the native FormData object and with the help of jQuery.

If you had asked us years ago we would have said that it was impossible to send files to the server via Ajax, to upload without having to reload the page. However Javascript currently does allow this possibility.

In this article we are going to explain a Javascript script that would help us to make an Ajax connection with a server in which we send form data along with data files. This connection will be made by Ajax, so that you don’t have to reload the page or resort to old tricks like an iframe.

To make this objective possible, there is a native Javascript object called FormData that will allow us to create the necessary structure to send data by post, through programming. To put it another way, with FormData we will be able to generate the same thing that the browser does automatically when a form is sent. Only in this case it will be through Javascript and where we can inject any data, even if it is not present in a form.

This would be the only native method in Javascript to send files, to upload to a server, through Ajax. We use jQuery to make our task easier, but we must especially clarify that it is not necessary at all. That is, we use jQuery because it is easier to do Ajax that way, being easier for those of us who are used to this Javascript library.

FormData

It would be worthwhile to discuss FormData separately, but for now we will only provide the information necessary to understand this example. It is an object (perhaps better understood as a class, although we know that there are no classes as such in Javascript) that allows us to create FormData objects to generate key/value pairs that can then be submitted in the same way as forms. . They will also be picked up on the server in the same way that the forms are received.

When you generate a FormData object, the information you add with append() uses the format of common forms that have the “multipart/form-data” attribute.

Note: FormData is present in all modern browsers, although in the case of Internet Explorer we will only find it from version 10.

When we have a FormData object we have an append() method in it that allows us to add that key/value pair. The data that we can add can come from forms that we have already created, but also from any other source, resource or service that we have in Javascript. This append() method receives several parameters, for now we will indicate the name of the data as the first parameter and the value as the second.

var formData = new FormData(); formData.append(“key”, “value”);

My form with INPUT FILE fields

This part is purely HTML. You will create the form just like you create any other common form. You will have one or several FILE fields that will be sent by Ajax along with other fields that may exist.

You will notice that in addition to the form we have placed a division with id=”message”. Then on that element we will send the text of the response of the Ajax connection. The rest of the code is regular HTML, where you can notice that we have an INPUT TEXT field and two INPUT fields for FILE.

My Javascript to send files by Ajax

We will see that carrying out an example of sending files by Ajax is really simple, even with the Ajax call itself. We will do it in a few lines of code. However, to make it clearer, we will explain the code in several steps.

Note: We just want to keep it simple, so we’re going to boil down the steps to the bare minimum. Logically with your Javascript you can do more things. There are scripts on the Internet to perform similar but more complex behaviors, incorporating accessory elements such as progress bars.

This would be the script that we are going to have to implement:

1) Create a submit event to submit the form with jQuery instead of letting it submit via the browser’s default method.

This behavior is purely jQuery and if you don’t know it just tell you that it is explained in the . You get it with a code like this.

$(“#formuploadajax”).on(“submit”, function(e){ e.preventDefault(); var f = $(this); // … rest of code from my exercise });

2) Generate the FormData object from the form and add the form data to it. We can also add any other data, even if it is not in a form field.

var formData = new FormData(document.getElementById(“formuploadajax”)); formData.append(“data”, “value”);

You will notice that when doing new FormData() we send the form itself as a parameter, with the native Javascript form object. This is so that the data set itself is generated from the fields in the HTML of the form. With this step we save having to do the append() of each file we want to upload.

On the second line we have a call to append() which is unnecessary to cover our goals, but I’ve placed it so you can see just how we would add any other data we might need with that method.

3) The call to Ajax, which we make with the jQuery $.ajax() method.

We see that several configuration variables must be set for the Ajax connection. The one that should call your attention is “data:”, which is the set of data that we want to post to the server. Note that as a data set we directly use the previously generated formData object.

$.ajax({ url: “receive.php”, type: “post”, dataType: “html”, data: formData, cache: false, contentType: false, processData: false }) .done(function(res){ $(“#message”).html(“Reply: ” + res); });

You will also be able to see how a done() method is defined on the same Ajax connection, to specify the Javascript actions to be implemented when the response is received from the server.

That’s it with that! You don’t need to do anything else, at least as far as Javascript is concerned, to perform that file submission asynchronously. Now you would have the part of managing the upload of the files on the server side. That already depends on the server language you are using. Here at .com we explain it to you in other articles for different languages.

full code

To make it easier to see and in case there is any doubt, we put the complete code of a page that would perform the upload with Ajax, as we have explained.