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>