我目前正在尝试使用 HTML5 FileAPI 构建文件上传器。文件上传器应该处理多个文件并显示图像预览(如果文件是图像)。
由于 FileReader 类异步工作,我想等到所有文件都被读取。因此我正在使用 Deferreds。
读取文件的方法返回一个承诺。另一种方法循环遍历所有文件并将所有承诺推送到数组中。然后,一旦所有承诺都添加到我的数组中,我就会应用 then() 方法。
现在我的问题。由于 then() 方法仅被调用once,当我得到所有的承诺时。我没有机会处理每一个承诺。我想做的是,一旦我所有的承诺都在那里,就循环遍历它们并返回结果。
这是我的文件处理器 Object
read: function(file) {
var reader = new FileReader();
var deferred = $.Deferred();
reader.onload = function(event){
deferred.resolve(event.target.result);
};
reader.onerror = function() {
deferred.reject(this);
}
if(/^image/.test(file.type))
reader.readAsDataURL(file);
return deferred.promise();
},
来了文件管理器对象的handleFileSelect() 方法应该调用FileProcessor.read() 方法。
handleFileSelect: function(e){
var $fileList = $('#file-list');
var files = e.target.files;
var promises = []; //Promises are going to be stored here
var filestring = '';
var processedFile;
// Loop trough all selected files
for(var i = 0; i < files.length; i++){
// Store the promise in a var...
processedFile = FileProcessor.read(files[i]);
// And push it into the array where the promises are stored
promises.push(processedFile);
}
// Once all deferreds have been fired...
$.when.apply(window, promises).then(function(){
for(var i = 0; i < promises.length; i++){
// PROBLEM HERE: I need to get the
// result from my resolved Deferred
// of every single promise object
console.log(promises[i]);
}
});
},
我是否对延期和承诺使用了错误的方法?难道它们不应该像我想做的那样使用吗?有没有更优雅的方式来实现我的目的?