Monday, 8 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Multiple File Drag and Drop Upload using HTML5 and Jquery

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with 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 live demo and drop files.

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax

for this I implemented with Form Data and File Reader javascript API.


- 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.


Simple PHP code uploading files from client mechanic to server location uploads folder.
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
echo($_POST['index']); // to validate

HTML5 Code

HTML5 drag and drop form.
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
<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" />
<div class="progressBar">
<div class="status"></div>

-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
DOB: 12/24/1986

No comments: