Skip to main content

Multiple Upload With Drag And Drop Functionality With HTML5 In PHP


Now I'll explain you how you can built your own uploader which can upload multiple image files concurrentyl. It works in modern web browsers like chrome,  firefox, safari etc. Simple php and jquery is used in this simple demo. Its vary user friendly and user can drop files in the specified area and he/she just have to click on upload button the work is over files uploaded on the server. It sounds cool lets see how it works. Here we had used ajx and include jquery and multipleupload.js

The working demo will explain you better you can download it.

Download Code

Requirments:

  1. html5
  2. jquery
  3. simple php code and javascript

HTML Code:

  It is the html Drag and Drop form area.

<body lang="en">
<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>
</body>
 

Javascript Code:

Here all parameters are defined. If you want to add more file types then you may add as per your choice.
var config = {

    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 upload url

}

$(document).ready(function(){

    initMultiUploader(config);

});

Upload.php:

This is the php coding that works on server side and help you to upload your files on server.
Files are saved in upload folder.

if($_SERVER['REQUEST_METHOD'] == "POST"){
 if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
  echo($_POST['index']);
 }
 exit;
}
?>
Labels:

Comments

Post a Comment

your Comment is sent for moderation, Thankyou

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.
Post a Comment
Read more

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model
Post a Comment
Read more

OSI Model (Tutorial-6)

What is the OSI model ? Open Systems Interconnection model is fundamental to all communications between network devices.  Developed in 1974 by ISO after the American Department of Defence began using the TCP/IP suite of protocols.  Finally adopted in 1977. It is now the theoretical model for how communication takes place between network devices. What are the seven layers ? Layers OSI Model Layer 7  Layer 6  Layer 5  Layer 4  Layer 3  Layer 2  Layer 1
Post a Comment
Read more