可以请求HTML5文件拖放实现的一个很好的工作示例吗？如果从外部应用程序(Windows资源管理器)到浏览器窗口执行拖放操作，则源代码应该可以工作。它应该尽可能多的浏览器。
我想要一个很好的解释的示例代码。我不想使用第三方库，因为我需要根据我的需要修改代码。代码应该基于HTML5和JavaScript。我不想使用JQuery。
我花了整整一天寻找材料的好材料，但令人惊讶的是，我没有找到任何好的东西。我发现这些示例在Mozilla上工作，但对Chrome无效。
解决方法
这是一个非常简单的例子。它显示一个红色的方块。如果您将图像拖放到红色方块上，它将其附加到身体。我已经确认它在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>
