Hello guys today i will tell you through this tutorial how you can upload multiple image files with progress bar through php and jquery ajax. so let’s try to understand step to step.
Ajax Multiple File Upload with Progress Bar using PHP JQuery Script, jQuery Ajax Multiple Images File Upload with Animating Progress Bar Using PHP, Multiple File upload progress bar with jQuery and PHP, Multiple 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 Multiple Image File Upload.
Step 3:- Uploads Folder Create.
Step 1: Create index.php File and Write HTML and Script Code.
This is the first step to upload multiple images file. In this step you are told that you first create a file of index.php.Then after that create a form in html to upload the file. And then you have to write the code of ajax jquery in this file as well.You are told by example below how to write the code in the index file.
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images File with Progress Bar Using PHP and JQuery Ajax</title>
</head>
<body>
<form method='post' action='' enctype="multipart/form-data">
<input type="file" id='files' name="files[]" multiple><br>
<input type="button" id="submit" value='Upload'>
</form>
<div id='successfully'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var form_data = new FormData();
var allfiles = document.getElementById('files').files.length;
for (var i = 0; i < allfiles; i++) {
form_data.append("files[]", document.getElementById('files').files[i]);
}
$.ajax({
url: 'upload.php',
type: 'post',
data: form_data,
dataType: 'json',
contentType: false,
processData: false,
success: function (success) {
var src = success;
$('#successfully').append('Your Multiple File is Upload.');
}
});
});
});
</script>
</body>
</html>
Step 2: Create upload.php File and Write PHP Code for Multiple Image File Upload.
This is the second step to upload multiple images file. In this step you are told how to write the code in php to upload multiple images files. You are given the code of php below. You save this code by adding it to your upload.php file.
Upload.php
<?php
$countfiles = count($_FILES['files']['name']);
$upload_location = "uploads/";
$files_array = array();
for($i = 0;$i < $countfiles; $i++){
$filename = $_FILES['files']['name'][$i];
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$valid_ext = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif');
if(in_array($ext, $valid_ext)){
$path = $upload_location.$filename;
if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$path)){
$files_array[] = $path;
}
}
}
echo json_encode($files_array);
die;
?>