Multiple File Drag and Drop Upload using Jquery and php

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers.

Drag and Drop file

 

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax for this I implemented with Form Data and File Reader javascript API.

Requirements
– Jquery (tested with 1.7+)
– HTML 5

How to use
Just include Jquery library and multiupload.js files available in download script.

Javascript Code
All config parameters are required. If you want to allow other files formats, add in valid files variable.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="files/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload_images.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>

HTML5 Code
HTML5 drag and drop form.

<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" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>

upload_images.php
Simple PHP code uploading files from client mechanic to server location uploads folder.

if($_SERVER['REQUEST_METHOD'] == "POST")
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "upload_image/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}

CSS Code (style.css)

<style type="text/css">
body {
  width:1000px;
  margin:25px auto;
  padding:0;
  font-family:Verdana, Geneva, sans-serif
}
.uploadArea {
  min-height:300px;
  height:auto;
  border:1px dotted #ccc;
  padding:10px;
  cursor:move;
  margin-bottom:10px;
  position:relative
}
h1, h5 {
  padding:0;
  margin:0
}
h1.title {
  font-family:boogaloo, cursive;
  padding:10px
}
.uploadArea h1 {
  color:#ccc;
  width:100%;
  z-index:0;
  text-align:center;
  vertical-align:middle;
  position:absolute;
  top:25px
}
.dfiles {
  clear:both;
  border:1px solid #ccc;
  background-color:#e4e4e4;
  padding:3px;
  position:relative;
  height:25px;
  margin:3px;
  z-index:1;
  width:97%;
  opacity:.6;
  cursor:default
}
h5 {
  width:95%;
  line-height:25px
}
h5, h5 img {
  float:left
}
.invalid {
  border:1px solid red!important
}
.buttonUpload {
  display:inline-block;
  padding:4px 10px;
  text-align:center;
  text-shadow:0 -1px 0 rgba(0, 0, 0, .25);
  background-color:#0074cc;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  border-color:#e6e6e6 #e6e6e6 #bfbfbf;
  border:1px solid #ccc;
  color:#fff;
  float:right;
}
.progress img {
  margin-top:7px;
  margin-left:24px
}
</style>

 

 

Please follow and like us:

Add a Comment