从拖放事件中抓取本地文件并显示它们

Question

我试图从拖放事件中抓取拖放文件，并在一个区域中显示图像，以便用户知道拖放成功。然而，我不确定如何抓取这些掉落的文件并在一个区域中显示它们。我已经尝试过这样做了:

$(e.originalEvent.dataTransfer.files).each(function(){
    $("#feedBackAreaTest").append("<img src='"+this.name+"' />");
});

然而，很明显，它只抓住了名字。我的问题是，什么是显示图像掉落的正确方式?this.name只抓取名称，而不是文件的链接。

Answer 1

File对象就像牡蛎:你可以从表面上观察它们，但你无法知道它们真正的里面有什么，除非你把它们撬开，看里面。为此，您需要使用FileReader从每个File对象中提取数据:

$(e.originalEvent.dataTransfer.files).each(function(){
    var reader = new FileReader();
    reader.readAsDataURL(this);
    reader.onload = function(readEvent) {
        $("#feedBackAreaTest").append("<img src='"+readEvent.target.result+"' />");
    }
});

FileReader对象有几个读取方法，每个方法都以Blob或File对象作为参数(readAsText, readAsDataURL等)。当读取操作完成后，FileReaader触发load事件，该事件具有刚刚读取的文件中的数据。

Answer 2

使用FileReader API;我从MDN中提取了这个示例，您可以使用:

var oFReader = new FileReader(), 
    rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
    $("#feedBackAreaTest").append("<img src='"+oFREvent.target.result+"' />");
};
function loadImageFile() {
    if (document.getElementById("uploadImage").files.length === 0) { 
    return; 
    }
    var oFile = document.getElementById("uploadImage").files[0];
    if (!rFilter.test(oFile.type)) { 
        alert("You must select a valid image file!"); 
        return; 
    }
    oFReader.readAsDataURL(oFile);
}