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:
- html5
- jquery
- 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; } ?>
Comments
Post a Comment
your Comment is sent for moderation, Thankyou