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

Question

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

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

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

Answer 1

文件 对象就像牡蛎:您可以从表面检查它们，但只有 pry 开它们并查看内部，您才能知道它们真正 有什么。为此，您需要使用 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、 ETC。)。读取操作完成后，FileReader 会触发一个 load 事件，其中包含刚刚读取的文件中的数据。