1

我正在尝试从放置事件中抓取拖放的文件并在一个区域中显示图像，以便用户知道放置成功。但是，我不确定如何抓取这些丢弃的文件并将它们显示在一个区域中。我已经尝试过这样的：

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

然而，它显然只是抓住了名字。我的问题是，显示丢弃图像的正确方法是什么？this.name只是抓取名称而不是文件的链接。

4

2 回答 2

4

File物体就像牡蛎：你可以从表面上观察它们，但直到你撬开它们并看里面，你才能知道它们到底有什么。为此，您需要使用 aFileReader从每个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对象有几个 read 方法，每个方法都将BloborFile对象作为参数（readAsText,readAsDataURL等）。当读取操作完成时，FileReaader触发一个load事件，其中包含刚刚读取的文件中的数据。

于 2013-05-23T15:44:12.253 回答
1

使用 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);
}
于 2013-05-23T15:57:14.570 回答