HTML5拖放問題

Question

我試圖實現HTML5拖放上傳文件。當文件被刪除時，我想調用php文件來處理掉落的文件。我如何調用php文件並訪問php文件中的拖動文件。此外，我想從PHP文件中發回成功或錯誤消息。

我無法弄清楚如何將文件發佈到php並從那裏獲得響應。 到目前爲止我的代碼是：

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 
     //get success msg or error msg 
     //alert(success) or alert(error) 
    } 

這裏的例子upload.php的文件：

<?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. 
    } 
?> 

Answer 1

這將有助於 - http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Answer 2

您可以使用jQuery，在下落回調執行AJAX調用。

$("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 
    } 
)} 

Answer 3

使用jQuery UI會給你拖動並以最簡單的方式