HTML5，JavaScript：從外部窗口拖放文件（Windows資源管理器）

Question

我可以請教一個好的工作示例HTML5文件拖放實施？如果從外部應用程序（Windows資源管理器）執行拖放到瀏覽器窗口，源代碼應該可以工作。它應該在儘可能多的瀏覽器上工作。

我想問一個有很好解釋的示例代碼。我不想使用第三方庫，因爲我需要根據自己的需要修改代碼。該代碼應基於HTML5和JavaScript。我不希望使用JQuery。

我花了整整一天的時間尋找物質的良好來源，但令人驚訝的是，我沒有找到任何好的東西。我發現的例子適用於Mozilla，但不適用於Chrome。

Answer 1

此鏈接解釋我的漂亮的細節問題：

http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 2

看看ondragover事件。你可以簡單地在div內部隱藏，直到ondragover事件觸發一個函數，該函數將顯示div中的內容，從而讓用戶拖放文件。在文件被添加到輸入時，使用onchange聲明可以讓你自動調用一個函數（比如上傳）。確保輸入允許多個文件，因爲您無法控制他們將嘗試拖入瀏覽器的數量。

Answer 3

這裏是一個死簡單的例子。它顯示一個紅色正方形。如果您將圖像拖到紅色方塊上，它會將其附加到身體上。我已經確認它適用於IE11，Chrome 38和Firefox 32.請參閱Html5Rocks文章以獲取更詳細的解釋。

var dropZone = document.getElementById('dropZone'); 
 

 
// Optional. Show the copy icon when dragging over. Seems to only work for chrome. 
 
dropZone.addEventListener('dragover', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    e.dataTransfer.dropEffect = 'copy'; 
 
}); 
 

 
// Get file data on drop 
 
dropZone.addEventListener('drop', function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    var files = e.dataTransfer.files; // Array of all files 
 

 
    for (var i=0, file; file=files[i]; i++) { 
 
     if (file.type.match(/image.*/)) { 
 
      var reader = new FileReader(); 
 

 
      reader.onload = function(e2) { 
 
       // finished reading file data. 
 
       var img = document.createElement('img'); 
 
       img.src= e2.target.result; 
 
       document.body.appendChild(img); 
 
      } 
 

 
      reader.readAsDataURL(file); // start reading the file data. 
 
     } 
 
    } 
 
});

<div id="dropZone" style="width: 100px; height: 100px; background-color: red"></div>