No description, website, or topics provided.
JavaScript PHP
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
uploads
.gitattributes
.gitignore
README.md
index.php
upload.php

README.md

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>