multiple_file_drag_and_drop_upload's Introduction

Multiple File Drag and Drop Upload

Multiple File Drag and Drop Upload this will work in modern browsers (HTML 5), File uploads happening through ajax for this i used [Form Data] (http://www.w3.org/TR/FileAPI/) and [File Reader] (http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/) javascript API.

File & Folders

/images - Required images
/css - Stylesheet files
/js - Javascript files and libraries
/uploads - New files holder
index.php - Client side File
upload.php - Server Side File

Requirements

- Jquery Library (version 1.7+)
- HTML5

How to use

Config

All Fields required.

support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",		// Valid file formats
form: "demoFiler",					// Form ID
dragArea: "dragAndDropFiles",		// Upload Area ID
uploadUrl: "upload.php"				// Server side file url

Init

Its simple init. Just call function with required configurations.

initMultiUploader(config);

Example

	var config = {
		support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",	
		form: "demoFiler",					
		dragArea: "dragAndDropFiles",		
		uploadUrl: "upload.php"				
	}
	$(document).ready(function(){
		initMultiUploader(config);
	});

<center><h1 class="title">Multiple Drag and Drop File Upload</h1></center>
<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" class="buttonUpload" />
</form>
<div class="progressBar">
	<div class="status"></div>
</div>

Recommend Projects