HTML5文件API：在FileReader中獲取File對象回調

使用JavaScript中的新File API，您可以讀取Javascript中的文件以創建dataURL以向客戶端顯示客戶端圖片。我想知道是否可以在FileReader的onload回調中訪問File對象。我將說明用一個例子：HTML5文件API：在FileReader中獲取File對象回調

 
var div = document.createElement('div'); 
div.ondrop = function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var files = e.dataTransfer.files; 
    for (var i=0; i<files.length; i++) { 
    var file = files[i]; // this is the file I want!! 
    var filereader = new FileReader(); 
    filereader.onload = function(e) { 
     this; // the FileReader object 
     e.target; // the same FileReader object 
     this.result; // the dataURL, something like data:image/jpeg;base64,..... 
     var img = document.createElement('img'); 
     img.src = this.result; 
     img.title = file.fileName; // This won't be working 
     document.appendChild(img); 
    } 
    } 
    return false; 
}

我能做的 - 什麼我現在做的 - 是包裹的內容for循環的功能，並執行它來創建一個新的範圍並保持文件在這樣的範圍內如此：

 
    for (var i=0; i<files.length; i++) { 
    var _file = files[i]; // this is the file I want!! 
    (function(file) { 
     // do FileReader stuff here 
    })(_file); 
    }

我只是想知道...也許我失去了一些東西。有沒有辦法從FileReader的onload函數中獲取File對象？ this和e.target都是FileReader對象而不是文件。 this或e是否有文件？我無法找到它:(

多謝

PS小提琴：。http://jsfiddle.net/rudiedirkx/ZWMRd/1/

來源

2010-12-09 Rudie

我已經找到了一種方法也許並不比範圍包裝好，但我認爲這是整潔：

for (var i=0; i<files.length; i++) { 
    var file = files[i]; // this is the file I want!! 
    var filereader = new FileReader(); 
    filereader.file = file; 
    filereader.onload = function(e) { 
     var file = this.file; // there it is! 
     // do stuff 
    } 
}

現在有一個更容易（顯然更快）的方式（同步！）得到一個文件的數據網址：

img.src = URL.createObjectURL(file);

兩種方法的http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/演示，以及說明的原始問題（拖動多個圖像並檢查標題工具提示）。

來源

2010-12-10 00:03:01 Rudie

-1

我不認爲this.file仍然受支持。當我嘗試運行答案代碼時，this.file是未定義的，而如果我從問題運行代碼，我會得到預期的結果。我認爲你必須使用閉包（至少這是他們在html5rocks（Example）上的做法）。

來源

2011-04-27 18:26:18

這就是我現在使用的（並且已經使用了一段時間）：http://js1.hotblocks.nl - javascript：http://js1.hotblocks.nl/tests/ajax/fdd.js - 仍然在我的答案中使用代碼。它的工作原理。沒有（醜陋）封閉。（它是用`//`註釋的。） – Rudie 2011-04-27 20:11:24

HTML5文件API：在FileReader中獲取File對象回調

回答

相關問題