Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system by using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers try the live demo and drop files.
Multiple File Drag and Drop Upload this will work in modern browsers like Chrome, Firefox, and Safari, File uploads happening through ajax
for this, I implemented with Form Data and File Reader javascript API.
Requirements
- Jquery (tested with 1.7+)
- HTML 5
How to use
Just include Jquery library and multiupload.js files available in download script.
Javascript Code
All config parameters are required. If you want to allow other files formats, add in valid files variable.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>upload.php
Simple PHP code uploading files from client mechanic to server location uploads folder.
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}HTML5 Code
HTML5 drag and drop form.
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>
