Drag & Drop Multiple File Upload Like Facebook

In this post me your Dost and Host Husain Saify(hunk husain) is going to teach you to to create a facebook like Drag and Drop Multiple file upload with jQuery & php. For this we are using a uploadFile plugin  Developed by Ravishanker Kusuma Thanx Sir For Developing it.

Drag and Drop Multiple File Upload With jQuery and Php

Live Demo Download jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin

JS & CSS files

In the First Step we are Including the jquery.js , jquery.uploadFile.js, uploadFile.css in the Head

<link href="https://googledrive.com/host/0B7XFDKT_0Oz4T3ZOcHk2eks4bmc/uploadfile.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B7XFDKT_0Oz4T3ZOcHk2eks4bmc/jquery.uploadfile.js"></script>

you can use your CDN

html

In html we have to just create a div and give it a id i have named it uploadDiv

<div id="uploadDiv">Select File</div>

javascript

In Javascript we are just using uploadFile function in the div $('div').uploadFile(); and giving some object read more about it click here

<script>
$(function(){
 $('#uploadDiv').uploadFile({
  url: "upload.php",
  allowedTypes: "png,jpg,gif",
  multiple: true,
  fileName: "hunklessons"
 });
});
</script>

upload.php

upload.php has the code for single and multiple file upload the if the file is single if block get executed and if its multiple else block get executed

<?php
$output_dir = "uploads/";
if(isset($_FILES["hunklessons"])){ 
 $return = array();
 $error = $_FILES["hunklessons"]["error"];
 //if uploading single file
 if(!is_array($file)){
  $file = $_FILES['hunklessons']['name'];
  move_uploaded_file($_FILES["hunklessons"]["tmp_name"];, $output_dir.$file);
  $return[] = $file;
 }else{ //if uploading multiple file
  foreach ($_FILES['hunklessons']['name'] as $file) {
   move_uploaded_file($_FILES["hunklessons"]["tmp_name"];, $output_dir.$file);
   $return[] = $file;
  }
 }
    echo json_encode($ret);
 }
 ?>

Any Question Plzz Comment