HTML5 drag and drop question
I'm trying to implement HTML5 drag and drop to upload a file. When the file is dropped, I want to call the php file to handle the dropped file. How can I call the php file and access the dragged file in php file. Also, I want to send the success or error message back from php file.
I'm unable to figure out how can I post the file to php and get the response from there. My code so far is:
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onload = uploadFile; //main function
reader.onloadend = uploadComplete;
reader.readAsDataURL(file);
}
function uploadFile(evt)
{
//call upload.php
//ge开发者_Go百科t success msg or error msg
//alert(success) or alert(error)
}
Here's example upload.php file:
<?php
$dropped_file //how to get the file
if (filesize($dropped_file) > 1024)
{
echo "size error" //how to send this error
}
else
{
echo "success" //how to send this success msg.
}
?>
This should help - http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
You can use jQuery, upon the drop callback perform an AJAX call.
$("body").droppable({
accept: "img", //Your element type goes here e.g. img
drop: function(event, ui){
//Perform an AJAX call here. You can access the current dropped item through
//ui.draggable
}
)}
Use jQuery UI will give you the ability to drag and drop in the most easy way
精彩评论