如何使用jQuery的拖放事件上傳從桌面拖動的文件？

Question

是否可以使用jQuery的drop事件從桌面拖動文件？

如果是這樣，我該如何獲取丟棄的文件數據？

Answer 1

這是有點混亂（你需要處理至少3個事件），但可能的。

首先，你需要添加事件處理器爲dragover和dragenter，防止默認操作爲這些事件這樣的：

$('#div').on(
    'dragover', 
    function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
) 
$('#div').on(
    'dragenter', 
    function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
) 

然後你就可以用e.originalEvent.dataTransfer.files添加下拉式處理器和訪問丟棄的文件：

$('#div').on(
    'drop', 
    function(e){ 
     if(e.originalEvent.dataTransfer){ 
      if(e.originalEvent.dataTransfer.files.length) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       /*UPLOAD FILES HERE*/ 
       upload(e.originalEvent.dataTransfer.files); 
      } 
     } 
    } 
); 

現在您可以從div中的desktop/explorer/finder中拖動文件並訪問它們。

http://jsfiddle.net/fSA4N/5/