html 实现资源管理器,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.

}

}

});