Question

在jQuery文件上传器（http://blueimp.github.io/jQuery-File-Upload/）中，当我开始上传一些文件时，我想显示一行“上载x的y”。 x是成功上载的文件数，y是上载/排队的文件数。我如何获得这两个数字？我看过这些选项，但我找不到任何可以使用的东西。

如果在上传完成期间或之后刷新页面，我还想显示一条名为“x files uploaded”的消息。那我怎么能得到那个号码呢？知道如何计算上传期间失败的文件数量也是一件好事。

感谢您的帮助。

Answer 1

根据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) {/* ... */});

您正在寻找的是：

添加

添加回调可以理解为文件上传的回调   请求队列。只要文件被添加到，就会调用它   fileupload小部件 - 通过文件输入选择，拖动和放大删除或添加API调用。

还有：

processdone

成功结束单个文件处理的回调   队列中。
Example: function (e, data) {
     console.log('Processing ' + data.files[data.index].name + ' done.'); 
}

只需保留一些变量即可增加和管理您的显示。

如果出现错误以显示正确的界面，也要注意不要忘记错误处理（使用'process fail'事件）。

要了解您要发送的文件数量，只需使用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模式的一部分，它只做一件事就是上传并为你提供所有工具来使用

Answer 2

可以使用默认blueimp前端结构中的queue.length显示总数:( Angular可以在html中执行{{queue.length}}。）

使用文档中的回调跟踪上传完成情况：在uploaddone上添加1，等等。

如果您需要跟踪页面加载之间上传的总数，则需要将其存储在应用的后端。 Angular可以在服务中执行此操作。

jQuery文件上传如何获取排队和上传的文件数量

2 个答案:

添加

processdone

关于页面刷新

代码建议