Hello everyone.! Today i will show how you can upload files to the server with PHP asynchronously with Ajax . AJAX stands for Asynchronous JavaScript and XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files. It can send and receive in the background too.

So for this i am using Jquery Script. If you want to learn how to upload files to the server with  PHP you can visit this link, as it is the same process with AJAX touch.

So first start with form.

<form method="POST" enctype="multipart/form-data" id="upload-form">
 <h1>Ajax File Upload</h1>
 <input type="file" name="file[]" multiple>
 <br>
 <input type="submit" id="upload-button" value="Upload">
</form>

Now this is our index.php page.


<title>PHP File Upload</title>
<script src="jquery.js"></script>

<style>
form{
width: 300px;
box-sizing: border-box;
padding: 20px;
background: #e3dfd7;
border-radius:10px;
margin: 150px auto;
}
form input
{
margin-bottom: 10px;
}
form input[type="file"]{
width: 100%;
padding: 10px;
font-size: 18px;
}
form input[type="submit"]
{
width: 100%;
border-radius: 10px;
border:0px;
background: #33691e;
color:white;
padding: 10px;
font-size: 18px;
}
#message
{
position: absolute;
left: 0;
top: 0;
width: 100%;
box-sizing: border-box;
padding: 10px;
color: white;
background: #64dd17;
text-align: center;
display: none;
}
</style>
<div id="message">Files Uploaded!!</div>
<form method="POST" enctype="multipart/form-data" id="upload-form">
<h1>Ajax File Upload</h1>
<input type="file" name="file[]" multiple>
<br>
<input type="submit" id="upload-button" value="Upload">
</form>

In this #message element by default is hidden, it only shows up when the file is uploaded (i.e on success event [discussed later in the tutorial]) and to change the value of submit button when the file is uploading(event beforeSend).

Now to upload files here is our php script which is same as  upload script in previous tutorial PHP Multiple File Uploads.

upload.php


<?php

if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_FILES['file']['name'])){
$x = 0;
$threshold = count($_FILES['file']['name']);
for($x = 0; $x < $threshold; $x++){
$filename = $_FILES['file']['name'][$x];
if(strpos($filename,'.php') == true) // If file is a php
{
continue;
}
else{
$dir='uploads/'.$filename;
if(file_exists($dir) == true) // To check if the file exist
{
$filename = uniqid().$filename; //if file exist..we rename so that it cannot replace existing file.
};
move_uploaded_file($_FILES['file']['tmp_name'][$x],'uploads/'.$filename) or die("Problem Uploading File");

};
};

};

?>

Now comes the ajax part.


<script>
$(document).ready(function()
{
$("#upload-form").on('submit',function(e){
e.preventDefault(); // to prevent default handling of a event. here it is submit event.
$.ajax({
url:'upload.php',
type:'POST',
data:new FormData(this), // create a form data object
processData:false, // Important
contentType:false, // Important
beforeSend:function(){ // before the file is uploaded
$("#upload-button").val('Working...');
},
success:function(data){

$("#upload-button").val('Upload');
$("#upload-form")[0].reset();
$("#message").slideDown('fast');
setTimeout(function(){
$("#message").slideUp('fast');
},3000);
}
});
});
});
</script>

Now you are ready with your own ajax file upload.!!

Download a Sample Project Here.

Advertisements