API tệp HTML5: nhận đối tượng Tệp trong FileReader gọi lại

Question

Với API tệp mới trong Javascript, bạn có thể đọc tệp trong Javascript để tạo dataURL để hiển thị ảnh khách hàng bên cạnh. Tôi tự hỏi nếu bạn có thể tiếp cận đối tượng File trong callback tải của FileReader. tôi sẽ minh họa điều này bằng một ví dụ:

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

gì tôi có thể làm - những gì tôi làm ngay bây giờ - là quấn các nội dung của vòng lặp for trong một chức năng và thực hiện nó để tạo ra một phạm vi mới và giữ một tập tin trong phạm vi đó như vậy:

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

Tôi đã tự hỏi ... Có thể tôi đang thiếu thứ gì đó. Có cách nào để lấy đối tượng File từ bên trong hàm onload của FileReader không? Cả hai this và e.target là đối tượng FileReader chứ không phải là Tệp. Có điều gì trong số this hoặc e đó là Tệp ?? Tôi không thể tìm thấy nó :(

Cảm ơn bó

PS Một fiddle:... http://jsfiddle.net/rudiedirkx/ZWMRd/1/

Answer 1

Tôi đã tìm ra một cách Có lẽ không tốt hơn so với wrapper phạm vi, nhưng tôi nghĩ rằng nó là gọn gàng:

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

hiện nay, một dễ dàng hơn nhiều (rõ ràng là nhanh hơn) chiều (sync!) để có được URL dữ liệu của một tập tin:

img.src = URL.createObjectURL(file); 

Demo trên http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ cả hai phương pháp và vấn đề ban đầu được minh họa (kéo nhiều hình ảnh và kiểm tra chú giải công cụ tiêu đề).

Answer 2

Tôi không nghĩ this.file vẫn được hỗ trợ. Khi tôi cố gắng chạy mã trả lời, this.file là không xác định trong khi nếu tôi chạy mã từ câu hỏi tôi nhận được kết quả mong đợi. Tôi nghĩ rằng bạn phải sử dụng đóng cửa (ít nhất đây là cách họ làm điều đó trên html5rocks (Example)).