Uploading jquery photos. Uploading a file to the server using JavaScript and JQuery library

Probably many have come across the question “How to upload a file to the server using JS and JQuery?”.
And probably not everyone was able to do this. In fact, everything is not as difficult as it seems.
In this lesson I will describe the process of uploading a file to a server (hosting).
Ajax technology is used to exchange data between the browser and the web server.
JQuery version used in the recipe: 2.2.2.

We create primitive markup from the html, head and body tags.
In the head tag you need to include the path to the jquery library.
In the example I'm using jquery from google server.

In the body tag we create a form that consists of an input tag and a button.
WITH using input type="file" selects a file to download.
The button tag is required to run the js code to transfer the file.

We set the form name="uploader", enctype="multipart/form-data", method="POST".
Form name: name="uploader"
Form data encoding method: enctype="multipart/form-data"
Data transfer method: method="POST"

Submit this file: Upload

All html and js markup code:
Submit this file: Upload

Let's move on to the java script code.
To transfer a file, you must transfer the entire form:
$("form").submit(function(e) (

We read the form data into a variable:
var formData = new FormData($(this));

Next, we use ajax technology to transfer data to the web server.
If the file transfer is successful, a message will be displayed in a pop-up window.
If an error occurs or the file is missing, a message will be displayed with the text of the problem that has arisen.
$.ajax(( url: "file.php", type: "POST", data: formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert( "Error!"); ), cache: false, contentType: false, processData: false ));

All code is in java script with using jquery:

Now all that's left is the server-side code to receive data from the form POST method request.

We get the root directory of the site and assign a folder for downloading files:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."uploads".DIRECTORY_SEPARATOR;

Reading the downloaded file:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["name"]);

Checking whether the file is loaded.
In accordance with the incoming data, we assign an accompanying message.
If the file is not uploaded, upload it to the directory specified in $uploadfile:
if (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "The file is valid and was successfully uploaded.\n"; ) else ( $out = "Possible file upload attack !\n"; )

When the specified actions are performed, a response is returned.

All code in php:

All html code including js:

Submit this file: Upload $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", data: formData, async: false, success: function (msg) ( alert(msg); ), error: function(msg) ( alert("Error!"); ), cache: false, contentType: false, processData: false )); e.preventDefault(); ));

Download source code file:

We've gone over several basic methods for retrieving data and passing it on with an AJAX request. Now it's time to talk about how you can upload files using AJAX. Until recently, there were not so many ways to download files without reloading the page itself (hidden iframe, Flash). They are still used today because there are still users with older versions of browsers who have not been affected by progress. But we won’t look back, so we keep up with the times.

Let's consider, in my opinion, one of the most convenient ways for working with files (and not only) - the FormData object. Let there be such a simple form for loading the user’s avatar:

HTML ( index.html file)

FULL NAME:
Avatar:

Let's move on to the JS part. There will be no difficulties with the “Full Name” field and we use it only to illustrate that along with the file, we can send any other data.

jQuery( script.js file)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), formData = new FormData($that.get( 0)); // create a new instance of the object and pass it our form (*) $.ajax(( url: $that.attr("action"), type: $that.attr("method"), contentType: false , // important - remove the default data formatting processData: false, // important - remove the default string conversion data: formData, dataType: "json", success: function(json)( if(json)( $that.replaceWith( json); ) ) )); )); ));

(*)Please note that we do not submit the form jQuery object, and the DOM element

PHP handler ( file handler.php)