jQuery文件上载的个人进度
jQuery文件上载的个人进度
提问于 2013-12-05 19:03:40
我被推荐使用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'));
});
});有没有人能告诉我怎么做，或者告诉我我找不到的文档？
解决方案
要识别上传，您可以在添加文件对象时向其添加其他参数。file对象在progress事件中保持不变(但在done方法中不同)，因此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'
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-12-05 21:03:17
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);
},
...Stack Overflow用户
发布于 2015-03-02 18:51:20
我知道这是一个古老的问题，但它在谷歌搜索结果中出现的频率很高，所提供的答案可能比标准用例所要求的更复杂。
$("#fileupload").fileupload({
...
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
...
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
data.context.text(progress + '%');
}
});Stack Overflow用户
发布于 2015-03-19 17:40:08
在php (从5.4版本开始)中，有一个叫做session upload progress的东西。它允许您监控单个文件的上传进度。
运行它可能非常麻烦，但是您可以在XMLHttpRequest / Ajax请求 when you search in Google中找到一些关于如何将其与jquery结合使用的示例。
还提到了here in the documentation of the jquery file upload plugin
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20398282
复制相关文章
相似问题