To upload files from local machine to the server is called file uploading. It works exactly the same as the definition, when we select file from the browser and click submit button, the browser takes file from local machine and submit it to the server and server does its job to save the file to the defined path. Here use ajax and jQuery to upload a file asynchronously.
Used Function:
- FormData(): It creates a new FormData object.
- FormData.append(): It appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
- move_uploaded_file(): It moves an uploaded file to a new location.
Steps to run the Program:
- Create a folder upload in the xampp/htdocs directory.
- Copy and edit the html/jQuery code as per requirement.
- Create a file upload.php and copy the php code given below.
- Start the Apache server and open the html file using browser.
- Select any text or image file and click on Upload button.
- The file will be uploaded to the “upload” folder in xamp/htdocs.
- If the file is an image, it will be displayed as well, if not an image file then “Uploaded file does not have an image” message will be displayed instead.
Example:
- upload.php
<?php
$filename = $_FILES['file']['name'];
$location = "upload/".$filename;
$uploadOk = 1;
if($uploadOk == 0){
echo 0;
}else{
if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
echo $location;
}else{
echo 0;
}
}
?>
|
- HTML File:
<!DOCTYPE html>
<html>
<head>
<title>
Async file upload with jQuery
</title>
<script src=
</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>
|
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!