javascript之jQuery文件上传个人进展
kenshinobiy
阅读:521
2023-11-05 18:46:41
评论:0
我被推荐使用 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'
}
请您参考如下方法:
According to the documentation there is a single progress event :
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
},
...
声明
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。