HTML5,JavaScript：从外部窗口拖放文件(Windows资源管理器)

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