Hello guys today i will tell you through this tutorial how you can upload image file with progress bar through php and jquery ajax. so let’s try to understand step to step.
Ajax File Upload with Progress Bar using PHP JQuery Script, jQuery Ajax Images File Upload with Animating Progress Bar Using PHP, File upload progress bar with jQuery and PHP, File Upload With Progress Bar Using jQuery And PHP
Overview
Step 1: Create index.php File and Write HTML and Script Code.
Step 2: Create upload.php File and Write PHP Code for Image File Upload.
Step 3: Images Folder Create.
Step 4: Uploads Folder Create.
Step 1: Create index.php File and Write HTML and Script Code.
In this step you have to create an index.php file. In which you will have to create a form using html code to upload the file. This form will have a file and button of input type.
Then after that you have to write the code of jquery ajax in the file of index.php. If you want, you can write the script code in that file by creating a js file. Then you have to include this file with index.php.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Images File with Progress Bar Using PHP and JQuery Ajax</title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<label>Choose and Upload File:</label>
<input type="file" name="file" id="fileupload">
<input type="submit" name="submit" value="UPLOAD FILE"/>
</form>
<div class="progress">
<div class="progress-bar"></div>
</div>
<div id="uploadsuccessfully"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#uploadForm").on('submit', function(e){
e.preventDefault();
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = ((evt.loaded / evt.total) * 100);
$(".progress-bar").width(percentComplete + '%');
$(".progress-bar").html(percentComplete+'%');
}
}, false);
return xhr;
},
type: 'POST',
url: 'upload.php',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$(".progress-bar").width('0%');
$('#uploadsuccessfully').html('<img src="images/ajaxloading.gif"/>');
},
error:function(){
$('#uploadsuccessfully').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
},
success: function(resp){
if(resp == 'ok'){
$('#uploadForm')[0].reset();
$('#uploadsuccessfully').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
}else if(resp == 'err'){
$('#uploadsuccessfully').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
}
}
});
});
$("#fileupload").change(function(){
var allowedTypes = ['application/pdf', 'application/msword', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
var file = this.files[0];
var fileType = file.type;
if(!allowedTypes.includes(fileType)){
alert('Please select a valid file (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
$("#fileupload").val('');
return false;
}
});
});
</script>
</body>
</html>
Step 2: Create upload.php File and Write PHP Code for Image File Upload.
In this step you will have to create an upload.php file. In which you will have to write the code of php to upload the images file.
upload.php
<?php
$upload = 'err';
if(!empty($_FILES['file'])){
$targetDir = "uploads/";
$allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif');
$fileName = basename($_FILES['file']['name']);
$targetFilePath = $targetDir.$fileName;
$fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
if(in_array($fileType, $allowTypes)){
if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){
$upload = 'ok';
}
}
}
echo $upload;
?>