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);
}

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

2 个答案: