Hey guys!! wssp. In the new Tutorial of “Ajax File Upload” i will show you how to upload files to the server using Ajax and PHP. Well Ajax stands for Asynchronous Javascript and XML which is capable of updating the page contents without reloading it. You can sent(POST) or even receive(GET) data from the server in background and is widely used in various web applications.

How Ajax Makes Difference.

Think about the normal form submission and uploads. You enter the details and after submitting the whole page loads, But with Ajax you can do lot more. You can have various events like before submitting the data to server, after receiving the data etc. and for each event you can show some events like upload file progress, a form submission message or even get the data and what the user is entered after processing by the server.

So For this I will be using the same PHP Upload Script as well as the form that I used in Multiple Upload Files.  I will be using Jquery and Jquery plugin called “Jquery Form”. Which you can download from here.

Now we are good to go.

So here’s my index.php page and I have downloaded all the scripts and included them.

Index.php

<script src="jquery.js"></script>
<script src="jquery.form.min.js"></script>
<body>
<form method="POST" enctype="multipart/form-data" id="form">
<h1>Upload Files</h1>
<input type="file" name="file[]" multiple required>
<input type="submit" value="Upload" id="sub-but">
</form>

</body>

Style.css

* {font-family: Consolas;}
    form {
        width: 300px;
        padding: 20px;
        background: white;
        margin: 200px auto;
        border-radius:10px;
        color: #727272;
    }
    form input {
        width: 100%;
        padding:5px;
        font-size:20px;
        margin-bottom: 10px;
    }
    form input[type=&quot;submit&quot;] {
        color: white;
        background: #ff4081;
        border:0;
        border-radius: 10px;

    }
    body {
        background: #303f9f;

    }

 

and the php script to upload files to the server. Watch a video tutorial.

Upload Script (upload.php)

<?php
if($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_FILES['file']['name'])){
$folder = 'uploads/';
$threshold = count($_FILES['file']['name']);
for($i = 0; $i<$threshold; $i++){
$filename = $_FILES['file']['name'][$i];
$path = $folder.$filename;
if(strpos($filename,'.php') == true){
echo "Choose another FIle!";
}
elseif (strpos($filename,'.exe') == true){
echo "Choose another FIle!";
}
else {
if(move_uploaded_file($_FILES['file']['tmp_name'][$i],$path)){
echo "File ".$i.' Uploaded Success!
';
}
else {
echo "File $i Upload Failed! :/";
};
};
};
};
?>

 

now here’s my Ajax Script. I have provided a url where to sent the data and rest the Jquery form plugin handles i.e method, process data, content type etc. uploadProgress a function with parameters event,position,total,percentComplete, we use percentComplete value with a ‘%’ to show the progress. well it’s your choice you can make a cool looking progress bar or HTML5 progress element. Here I am showing the % in upload button value to give a basic understanding how it works.

$(document).ready(function(){

$("#form").on('submit',function (e) {
e.preventDefault();
$(this).ajaxSubmit({
url:'upload.php',
uploadProgress:function (event,position,total,percentComplete) {
$("#sub-but").val(percentComplete+'%');
},
success:function (data) {
$("#sub-but").val('Files Uploaded!');
setTimeout(function () {
$("#sub-but").val('Uplaod');
},1000)
}
});
});
});

So now you are ready with your application that upload files to the server in the background with progress bar or percentage.

Watch Video Tutorial On Tutoid

 

Advertisements