Multiple File Drag and Drop Upload: Upload drag and dropped files

Recommend this page to a friend!
  Info   View files View files (12)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 522 All time: 52 This week: 4Up
Version License JavaScript version Categories
drag-and-upload 1.0.1GNU General Publi...1.0jQuery, Events, Files and Folders
Description Author

This object can upload drag and dropped files.

It starts to listen to drag and drop events to process files dragged to a given page element.

The class can process dropped files by uploading them to the server using jQuery AJAX support to upload one or more dropped files at a time.

Files selected with a given form file input can also be uploaded by this object.

Picture of Arun Kumar
Name: Arun Kumar <contact>
Classes: 1 package by
Country: India India
Age: 36
All time rank: 453 in India India
Week rank: 6 Up1 in India India Up

Details
# 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>
  Files folder image Files  
File Role Description
Files folder imagecss (1 file)
Files folder imageimages (6 files)
Files folder imagejs (1 file)
Files folder imageuploads (1 file)
Accessible without login Plain text file index.php Example Auxiliary data
Accessible without login Plain text file README.md Data Auxiliary data
Accessible without login Plain text file upload.php Data Auxiliary data

  Files folder image Files  /  css  
File Role Description
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file ajax-loader.gif Icon Icon image
  Accessible without login Image file ajax-loaderback.gif Icon Icon image
  Accessible without login Image file ajax-loadereee.gif Icon Icon image
  Accessible without login Image file image.png Icon Icon image
  Accessible without login Image file trash.png Icon Icon image
  Accessible without login Image file unknown.png Icon Icon image

  Files folder image Files  /  js  
File Role Description
  Plain text file multiupload.js Class Class source

  Files folder image Files  /  uploads  
File Role Description
  Accessible without login Image file jessica-alba-8_1280x800.jpg Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:522
This week:0
All time:52
This week:4Up