Ajax File Upload jQuery Example
Last Updated : Mar 11, 2024
IN - jQuery Ajax | Written & Updated By - Riya
In this article we will show you the solution of ajax file upload jQuery example, the process of transferring files from such a local machine to a server is known as jQuery ajax file upload.
When we choose a file inside the browser and press to submit button, a browser extracts the chosen file from our local computer and transmits it into the server, which then stores it to the designated location.
Using ajax and jQuery, we can upload a file asynchronously.
Now move to the concept of Ajax file upload jquery example.
Step By Step Guide On Ajax File Upload jQuery Example :-
Uploading files can be challenging for developers, but doing so with Ajax is more simpler and easier.
File uploading has become increasingly simpler thanks to developments like Ajax and browser compatibility. While it is unsecure and incompatible with in all browsers, HTML5 uploaders offer easy fixes.
We use the following two functions when uploading files via jQuery Ajax.
FormData() - FormData() is a function for producing new form data objects.
Move uploaded file() - You can move an uploaded file using this function.
The equation needed server-side components to manage the incoming data stream because the client-side facilities were inadequate.
Elements of the HTML5 file input file were helpful on the client side.
However, by incorporating file upload functionality using Ajax and JavaScript, programmers have unnecessarily increased the complexity of their applications.
When programmers build file uploads using well-known frameworks like jQuery, they add unnecessary complexity.
In order to perform an Ajax file upload, a developer should use pure JavaScript and not use bulky libraries and frameworks.
Three main elements make up the JQuery ajax file uploading project.
An XMLHttpRequest FormData object, a FileReader object, and the File input element that allows multiple files to be uploaded through the many properties.
When you upload a file using FormData or FileReader in an older browser, it will be treated the same as a regular, non-AJAX upload.
Using jQuery, how do you upload files asynchronously?
Upload the files to the server. It is exactly the same process as it is described in the definition; you choose a file in your browser, press the submit button, and the browser will send it from your computer to a server, which then saves it where you specify.
Asynchronous file uploading is done here using jQuery and Ajax.
Used Purpose :-
FormData(): This function produces a fresh FormData object.
FormData.append(): adds a new value to an already-existing key inside of the FormData object or creates a new key if one doesn't already exist.
move uploaded file(): The function relocates a file that has been uploaded.
PHP File:
<?php
/* Getting file name */
$filename = $_FILES['file']['name'];
/* Location */
$location = "upload/".$filename;
$uploadOk = 1;
if($uploadOk == 0){
echo 0;
}else{
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
echo $location;
}else{
echo 0;
}
}
?>
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>
Ajax file upload jquery example
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<div align="center">
<form method="post" action="" enctype="multipart/form-data"
id="myform">
<div >
<input type="file" id="file" name="file" />
<input type="button" class="button" value="Upload"
id="but_upload">
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#but_upload").click(function() {
var fd = new FormData();
var files = $('#file')[0].files[0];
fd.append('file', files);
$.ajax({
url: 'upload.php',
type: 'post',
data: fd,
contentType: false,
processData: false,
success: function(response){
if(response != 0){
alert('file uploaded');
}
else{
alert('file not uploaded');
}
},
});
});
});
</script>
</body>
</html>
- In coding section firstly you see the php file.
- Our code begins with HTML and HEAD tags.
- Next, we write the page's title.
- Next, the jQuery library is imported.
- Next, we begin writing the code's body.
- Next, the div class is created.
- Next, we use method post to create the form.
- Next, we design the name and button for the file upload.
- After that, we launch our jQuery script.
- To run jQuery code, we build the ready() method in the script.
- The upload feature is then created.
- Next, two variables are created.
- After that, we add files using the append function.
- After that, ajax is called.
- Then, SCRIPT, BODY, and HTML elements are used to conclude our application.
Conclusion :-
Consequently, we were able to understand the idea behind the jQuery example of an ajax file upload.
We also discovered that jQuery is an open source JavaScript toolkit that makes it easier for an HTML/CSS document to communicate with other documents.
It is well known for its motto of "Write less, do more."
I hope this article on ajax file upload jQuery example helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
