從拖放事件中獲取本地文件並顯示它們

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