Login   Register  
Icontem

File: README.md

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Arun Kumar  >  Multiple File Drag and Drop Upload  >  README.md  >  Download  
File: README.md
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Multiple File Drag and Drop Upload
Upload drag and dropped files
Author: By
Last change:
Date: 2012-09-02 10:14
Size: 1,723 bytes
 

Contents

Class file image Download
# 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

```javascript
	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>