In this tutorial, we have use HTML, CSS JavaScript and Bootstrap 5 Style sheet library at client-side that means drag area we will create using HTML and CSS, files data get from drag and drop area using JavaScript, progress bar will be create using Bootstrap and at server side we have use PHP Script for upload multiple file on to the server. Below you can find source code of Drag and Drop Upload Multiple files with progress bar using JavaScript in PHP.
Source Code
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</title>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-5 text-center text-primary"><b>Drag & Drop Upload Multiple File with Progress Bar using JavaScript in PHP</b></h1>
<div class="card">
<div class="card-header">Drag & Drop File Here</div>
<div class="card-body">
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<div id="drag_drop">Drag & Drop File Here</div>
</div>
<div class="col-md-3"> </div>
</div>
</div>
</div>
<br />
<div class="progress" id="progress_bar" style="display:none; height:50px;">
<div class="progress-bar bg-success" id="progress_bar_process" role="progressbar" style="width:0%; height:50px;">0%
</div>
</div>
<div id="uploaded_image" class="row mt-5"></div>
</div>
</body>
</html>
<style>
#drag_drop{
background-color : #f9f9f9;
border : #ccc 4px dashed;
line-height : 250px;
padding : 12px;
font-size : 24px;
text-align : center;
}
</style>
<script>
function _(element)
{
return document.getElementById(element);
}
_('drag_drop').ondragover = function(event)
{
this.style.borderColor = '#333';
return false;
}
_('drag_drop').ondragleave = function(event)
{
this.style.borderColor = '#ccc';
return false;
}
_('drag_drop').ondrop = function(event)
{
event.preventDefault();
var form_data = new FormData();
var image_number = 1;
var error = '';
var drop_files = event.dataTransfer.files;
for(var count = 0; count < drop_files.length; count++)
{
if(!['image/jpeg', 'image/png', 'video/mp4'].includes(drop_files[count].type))
{
error += '<div class="alert alert-danger"><b>'+image_number+'</b> Selected File must be .jpg or .png Only.</div>';
}
else
{
form_data.append("images[]", drop_files[count]);
}
image_number++;
}
if(error != '')
{
_('uploaded_image').innerHTML = error;
_('drag_drop').style.borderColor = '#ccc';
}
else
{
_('progress_bar').style.display = 'block';
var ajax_request = new XMLHttpRequest();
ajax_request.open("post", "upload.php");
ajax_request.upload.addEventListener('progress', function(event){
var percent_completed = Math.round((event.loaded / event.total) * 100);
_('progress_bar_process').style.width = percent_completed + '%';
_('progress_bar_process').innerHTML = percent_completed + '% completed';
});
ajax_request.addEventListener('load', function(event){
_('uploaded_image').innerHTML = '<div class="alert alert-success">Files Uploaded Successfully</div>';
_('drag_drop').style.borderColor = '#ccc';
});
ajax_request.send(form_data);
}
}
</script>
upload.php
<?php
//upload.php
if(isset($_FILES['images']))
{
for($count = 0; $count < count($_FILES['images']['name']); $count++)
{
$extension = pathinfo($_FILES['images']['name'][$count], PATHINFO_EXTENSION);
$new_name = uniqid() . '.' . $extension;
move_uploaded_file($_FILES['images']['tmp_name'][$count], 'images/' . $new_name);
}
echo 'success';
}
?>
資料來源: https://www.webslesson.info/2021/08/drag-and-drop-multiple-file-upload-with-progress-bar-using-javascript.html
