Updated April 10, 2023
Introduction to jQuery ajax upload file
The jQuery ajax upload file is used to upload the files from the local system to the server. specifies that the type of data sending to the server. Sometimes we need to upload the file, so we select the file from the browser and click the submit button, then the browser accepts the file from the local system and sends it to the server and the server saves the file to the specified location at the server. With the help of jQuery and ajax we can upload the file to the server.
Syntax –
- $.ajax( { url : phpFile_location, data : formdata, type : ‘post’ } );
- FormData();
- append( name, value );
- move_uploaded_file( from, to );
Parameters –
- url – It specifies the url of the PHP file that is used as the backend file to store the uploaded file.
- data – It specifies the data to be sent to the server, here we are sending the uploaded file as the formdata object.
- type – It specifies the type of the request sending to the server, the post request we used to send the data to the server.
- FormData() – This function is used to create the new Formdata object for the uploaded file.
- FormData.append() – This function is used to appends a new value to an existing key of a FormData object or else adds the key that is not present inside the FormData. It accepts two parameters key and the respective value.
- move_uploaded_file() – This function is used to move the uploaded file to the specified location to store it. It accepts two parameters which are from and to. The form specifies the uploaded file name and the to parameter specifies the location where to store the file.
Working on an ajax upload file
The jQuery ajax upload file is used to upload or send the file to the server. We can perform the upload file to the server with the help of jQuery, ajax, and PHP. First, we will create the HTML or jQuery code to display the upload option for the file. Next use the ajax() function to send the post request to the url( PHP file) with the uploaded file as “$.ajax({ cache : false, data : fdata, url : ‘file_upload.php’, type : ‘post’ });”, where the first parameter is the URL of the PHP file which will store the uploaded file to the new location.
Examples for the jQuery ajax upload file
Example of jQuery ajax upload file to select the file from the local machine and upload it to the server –
First, create the file_upload folder in the xampp/htdocs directory, then create the HTML and jquery code file as given below, and then create the PHP file by name file_upload.php file with the code given below (it contains the PHP code to store the uploaded to the specified location). Next, start the Apache server of the xampp and open the HTML file in the browser. And start uploading the file by selecting the file from the local system and click on upload.
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<title> This is an example for jQuery ajax upload file </title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h3> This is an example for jQuery ajax upload file </h3>
<div >
<form id = "myform" method = "post" action = "" enctype = "multipart/form-data">
<div >
<input id = "file" type = "file" name = "file" />
<input id = "btn" type = "button" class = "button" value = "Upload file">
</div>
</form>
</div>
<script type = "text/javascript">
$( document ).ready( function() {
$( "#btn" ).click(function() {
var fdata = new FormData();
var files = $ ('#file' )[0].files[0];
fdata.append( 'file', files );
$.ajax( {
cache :fale,
data : fdata,
url : 'file_upload.php',
type : 'post',
processData : false,
contentType : false,
});
});
});
</script>
</body>
</html>The file_upload.php –
<?php
/* take file name */
$filename = $_FILES['file']['name'];
/* location of the file */
$loc = "upload/".$filename;
$uplOk = 1;
if( $uplOk == 0 )
{
echo 0;
}
else
{
/* uploading file */
if( move_uploaded_file( $_FILES['file']['tmp_name'], $loc ) )
{
echo $loc;
} else
{
echo 0;
}
}
?>An output of the above code is –
Once we select the file and click on the upload button, the output is –
In the above code, when we click on the “Choose File” button, it opens the window to select the file from the local machine. After selecting the uploading file, next click on the “upload file” button that calls to the ajax() function, and the ajax() function sends the HTTP request to the server to post the uploaded file. The parameter passed to the ajax() function like the URL parameter which mentioned the URL of the PHP file to where the data to be store and the data parameter which mentioned the uploaded file. Next, the received filed or uploaded file is store inside the file_upload folder, and in the same way we can upload the different types of files.
Conclusion
The jQuery ajax upload file can be performed with the help of jQuery, ajax, and PHP to upload the files from the local system to the server.
Recommended Articles
This is a guide to jQuery ajax upload file. Here we discuss the Working and Example of jQuery ajax upload file to select the file from the local machine. You may also have a look at the following articles to learn more –
