在 jQuery 文件上传器 (http://blueimp.github.io/jQuery-File-Upload/) 中，当我开始上传一些文件时，我想显示一行“Uploaded x of y”。 x 是成功上传的文件数，y 是上传/排队的文件数。我如何获得这两个数字？我查看了选项，但没有找到可以使用的任何东西。
如果页面在上传完成期间或之后刷新，我还想显示一条名为“已上传 x 个文件”的消息。那么我怎样才能得到那个号码呢？知道如何计算上传过程中失败的文件数也很好。
感谢您的帮助。
【问题讨论】：
标签： jquery file upload blueimp
基于API documentation，您可以在上传过程中使用"Callback Options" 绑定事件。
$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});
// and some Processing Callback Options
.bind('fileuploadprocessstart', function (e) {/* ... */})
.bind('fileuploadprocess', function (e, data) {/* ... */})
.bind('fileuploadprocessdone', function (e, data) {/* ... */})
.bind('fileuploadprocessfail', function (e, data) {/* ... */})
.bind('fileuploadprocessalways', function (e, data) {/* ... */})
.bind('fileuploadprocessstop', function (e) {/* ... */});
你要找的是：
添加
add回调可以理解为文件上传的回调 请求队列。将文件添加到 文件上传小部件 - 通过文件输入选择、拖放或添加 API 调用。
还有：
处理完毕
单个文件处理成功结束的回调 排队。
Example: function (e, data) { console.log('Processing ' + data.files[data.index].name + ' done.'); }
只需保留一些变量来增加和管理您的显示。
如果发生错误以显示正确的界面，请注意不要忘记错误处理（带有“进程失败”事件）。
要知道您发送了多少文件，只需使用add events 来跟踪您的变量。
你可以调用一些函数来获得这些值，但我不推荐它们，因为事件绑定是专门为让你的代码随时保持同步而构建的。
刷新页面时，您需要使用sessionStorage 来保留值。最简单的方法是每次 number_of_files 更改时更新此值。 (see document on MDN)
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
您只需要在加载（或上传插件的初始化）时获取此值并设置变量的初始值...这样它将跟踪上一个会话。
var counter = 0;
var number_of_files = 0; // or sessionStorage.getItem('number_of_files')
$('#fileupload')
.bind('fileuploadadd', function (e, data) {
$.each(data.files, function (index, file) {
console.log('Added file in queue: ' + file.name);
number_of_files = number_of_files + 1;
sessionStorage.setItem('number_of_files', number_of_files);
});
})
.bind('fileuploadprocessdone', function (e, data) {
console.log(counter + " / " + number_of_files);
});
您只需要在代码中包含所有大小写，例如删除、修改和其他...以确保您的值始终是最新的。但是 jQuery-File-Upload 不应该负责您的视图，作为 MVC 模式的一部分，它只做一件事，即上传并为您提供所有工具来使用它
【讨论】：
jQuery('#fileupload').fileupload('option').getNumberOfFiles(); 和jQuery("#fileupload .template-download:not('.ui-state-error')").length，但它们不能正常工作。请问有什么帮助吗？
sessionStorage 和localStorage 以在刷新时保留这些信息。除非你实现了两种方式的数据绑定，否则如果你只使用 getNumberOfFiles() 将很难让你的 HTML 保持正确的值。
可以在默认的 blueimp 前端结构中使用 queue.length 显示总数：（Angular 可以在 html 中执行 {{queue.length}}）。
使用文档中的回调跟踪上传完成：在 uploaddone 上添加 1 等。
如果您需要跟踪页面加载之间的总上传量，您需要将其存储在应用的后端。 Angular 可以在服务中执行此操作。
【讨论】：