Skip to content

arunkumarsekar/Multiple_file_drag_and_drop_upload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>	

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published