如何显示FineUploader文件preprocessing过程中进展如何？ [英] How to show progress during preprocessing of files in FineUploader?

问题描述

我申请了一些preprocessing的文件与FineUploader（天青）上传时他们。具体而言，这意味着在计算文件的MD5哈希和可能编辑字节一些具体内容。我实现了这一点，附上我code到 onSubmit事件

I apply some preprocessing to files when uploading them with FineUploader (to Azure). Specifically, this means calculating the file's MD5 hash and possibly editing some specific elements of the bytes. I've implemented this and attached my code to the onSubmit event.

不幸的是，这个过程可能需要相当多的时间，而用户通常同时提交的文件2000年间，18至任何地方。 FineUploader不将它们添加到UI也不会显示在这个阶段取得进展，离开我的用户在黑暗中。他们会添加更多的文件，以为自己做错了什么，并进行其他不正确的决定。

Unfortunately, this process can take quite a lot of time, and users typically submit anywhere between 18 to 2000 files simultaneously. FineUploader doesn't add them to the UI nor does it show progress at this stage, leaving my users in the dark. They will add more files, thinking that they did something wrong, and make other incorrect decisions.

我已经打算与网络工作者的队列做加工，但这只会使UI更加敏感，这将不利于表现出一些反馈给我的用户。我不知道我是否应该切换到不同的事件，如的OnValidate ，或者有一些其他的方法，我可以考虑。你觉得呢？

I already intend to do the processing with a queue of web workers, but this will only makes the UI more responsive, it won't help showing some feedback to my users. I'm wondering if I should switch to a different event such as onValidate, or if there is some other approach I could consider. What do you think?

推荐答案

显示进度很容易。我增加了以下的HTML模板：

Showing progress was easy. I added the following HTML to the template:

<span class="preprocessing-selector qq-drop-processing qq-hide">
    <span>Pre-processing files...</span>
    <span class="preprocessing-spinner-selector qq-drop-processing-spinner"></span>
</span>

在我的自定义处理的 onFinish 处理我加入 $（。preprocessing选择器）。addClass（QQ-隐藏）; 和我添加 $（preprocessing选择器）removeClass移除（QQ隐藏）; 来在的onsubmit 处理FineUploader的。

In the onFinish handler of my custom processing I added $(".preprocessing-selector").addClass("qq-hide"); and I added $(".preprocessing-selector").removeClass("qq-hide"); to the onSubmit handler of FineUploader.

这足以表明进度。

对于那些有兴趣知道我怎么加preprocessing进入管道，这里的盛大概述和解释。至于我可以从我们的preliminary测试结果告诉有没有性能问题。

For those interested in knowing how I added preprocessing into the pipeline, here's the grand overview and explanation. As far as I can tell from our preliminary test results there are no performance issues.

我用了一个名为要点 workcrew.js ，并进行一些改动，以用它为我的目的。它管理网络工作者的游泳池，并提供一个简单的API。我使用了 onFinish 事件隐藏进度指示器。

I used a gist called workcrew.js and applied some changes to use it for my purposes. It manages a pool of Web Workers and provides a simple API. I used the onFinish event to hide the progress indicator.

当一个文件被提交后，我将它传递给workcrew.js为preprocessing并返回一个承诺FineUploader。工人们返回MD5哈希值，并且，如果preprocessing是必要的，修改后的文件对象和它的新的MD5哈希值。

Whenever a file is submitted, I pass it to workcrew.js for preprocessing and return a promise to FineUploader. The workers return the MD5 hash, and, if preprocessing was necessary, the modified File object and its new MD5 hash.

• 如果我们看到之前（副本）这个MD5哈希我们拒绝承诺。


• 如果我们得到了一个修改文件对象，我们拒绝的承诺，并使用 addUploads提交新文件。


• ，否则我们设定的MD5哈希从Azure中的MD5哈希核查机制中受益，并解决的承诺。

• If we've seen this MD5 hash before (duplicate) we reject the promise.
• If we got a modified File object, we reject the promise and submit the new file using addUploads.
• Otherwise we set the MD5 hash to benefit from Azure's MD5 hash verification mechanism and resolve the promise.

一个陷阱：你必须确保使用 unshiftWork 而不是 pushWork 发送当一个文件workcrew。 JS，所以已重新提交该处理的文件会得到优先处理。这样的处理，并同时上传发生。否则，你会首先处理所有提交的文件，然后上传，这是方法效率较低。

One catch: you have to make sure to use unshiftWork instead of pushWork when sending a file to workcrew.js, so that processed files that have been resubmitted are handled first. That way processing and uploading happens concurrently. Otherwise you'll be processing all submitted files first, and then uploading, which is way less efficient.

这篇关于如何显示FineUploader文件preprocessing过程中进展如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！