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 try live demo and drop files.
Download Script 
Live DemoDeveloper
Arun Kumar Sekar
Engineer, Plugin Expert
Chennai, INDIA
Engineer, Plugin Expert
Chennai, INDIA
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 type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/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.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>
<script type="text/javascript" src="js/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.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>
upload.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'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}
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>
<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>
6 comments:
awesome yaar
Hi this is great!! there is any way to show the name and size of the uploaded image under the form? it would also be great! thanks!
great thinking, but for that you have to create a database in which you have to include name of the image, size of the image, and if you like then you can also enter serial number or date of the uploaded image, and then you have to make a script name "config.php" in which you have to connect your database.
after that, make a change in upload.php and html file
include("LOCATION_OF_CONFIG.PHP");
Por favor explica el código paso a paso, no lo entiendo por completo!!!!!
Por favor explica el código paso a paso, no lo entiendo por completo!!!!!
Por favor explica el código paso a paso, lo necesito para poderle hacer modificaciones y adecuarlo a las necesidades de mi proyecto!!!
Post a Comment