我被推荐使用blueimp开发的jQuery文件上传插件。
但是我没能成功更新单独文件的进度。我理解如何使用文档中记录的合并后的进度。
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
console.log(progress);
}
如何针对每个上传文件执行相同的操作?如何检索与此特定上传文件相关联的DOM元素(进度条)? 我考虑通过文件名和文件大小创建ID,但是由于用户可能多次上传相同的文件(到不同的目标),所以这种方法行不通。
目前我正在使用以下实现:
$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data)
{
$.each(data.result.files, function (index, file)
{
//$('<p/>').text(file.name).appendTo(document.body);
//console.log('done with '+file.name);
});
},
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
//$('#progress .bar').css('width', progress + '%');
//console.log(progress);
}
}).on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
var node = $('<div class="progressBox"></div>');
node.append('<div class="progressBoxBack"></div>');
node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0% 0 ko/s 0 sec left</span></p>');
node.append('<div class="progressBar"><div style="width:23%;"></div></div>');
node.appendTo($('#progressContainer'));
});
});
有人能告诉我如何做,或者给我指向我找不到的文档吗?
解决方案
要识别上传文件,可以在添加文件对象时添加其他参数。 文件对象在进程事件中保持不变(但不在完成方法中)。 因此,在fileuploadadd上:
.on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
file.uploadID = 'someidentification' ;
});
});
然后当你处理进度时:
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(data.files[0].uploadID); // returns 'someidentification'
}