HTML5、JavaScript：从外部窗口拖放文件（Windows 资源管理器）

Question

我可以请求一个 HTML5 文件拖放 实现的良好工作示例吗？如果从外部应用程序（Windows 资源管理器）拖放到浏览器窗口，源代码应该可以工作。它应该适用于尽可能多的浏览器。

我想要求一个示例代码，并有很好的解释。我不想使用第三方库，因为我需要根据需要修改代码。代码应基于 HTML5 和 JavaScript 。我不想使用 JQuery。

我花了一整天的时间寻找好的素材来源，但令人惊讶的是，我没有找到任何好的素材。我找到的示例适用于 Mozilla，但不适用于 Chrome。

原文由 Bunkai.Satori 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个非常简单的例子。它显示一个红色方块。如果您将图像拖到红色方块上，它会将其附加到正文中。我已经确认它适用于 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>

原文由 EricP 发布，翻译遵循 CC BY-SA 3.0 许可协议