Extjs文件上传进度答案

【问题标题】：Extjs file upload progressExtjs文件上传进度
【发布时间】：2013-01-04 14:16:50
【问题描述】：

我在 ExtJS4 中看到过表单文件上传示例，我需要自定义文件上传的进度。

我看到了 waitMsg 配置属性，但我不想使用它，也不想使用 extjs 3rd 方插件。

那么，我怎样才能从 extjs 中的上传表单中获得简单的当前上传进度？

【问题讨论】：

标签： forms extjs upload progress

【解决方案1】：

waitMsg 使用带有无限自动更新进度条的消息框。所以你不能只创建一个显示当前上传的进度条。

您可以创建自己的Ext.ProgressBar 并估计上传时间，并在完成后将其设置为最大值。但我猜你不想那样。

回答您的问题：您不能简单地跟踪当前的上传进度。

如果您真的需要这种用户体验，可以尝试3rd party component。

引用文档：

文件上传不是使用普通的“Ajax”技术执行的，即它们不是使用 XMLHttpRequests 执行的。相反，表格是使用 DOM 元素以标准方式提交临时修改为使其目标设置为动态引用生成的，隐藏的，它被插入到文档中，但是收集返回数据后删除。

【讨论】：

我认为 extjs 处理文件 PUT 请求并且 xhr 必须返回要发送的字节......不是吗？
stackoverflow.com/questions/76976/… 这个关于 XHR 的问题在这里讨论。我如何从 extjs 获取请求 xhr 对象？
对不起。我希望我们能轻松做到；）
我们可以向 Sencha 发送请求 :-)
检查 Ivan Novakov (github.com/ivan-novakov/extjs-upload-widget) 的 Ext JS v4.x 的第 3 方文件上传小部件；以及由 Bugs Bunny (github.com/BugsBunny338/extjs-upload-widget) 编辑的 Ext JS v5.x 的相同分叉小部件。

【解决方案2】：

buttons: [{
    text: 'Upload',
    handler: function () {
        var form = this.up('form').getForm();
        if (form.isValid()) {
            form.submit({
                url: '/upload/file',
                waitMsg: 'Uploading your file...',
                success: function (f, a) {
                    var result = a.result,
                        data = result.data,
                        name = data.name,
                        size = data.size,
                        message = Ext.String.format('<b>Message:</b> {0}<br>' +
                            '<b>FileName:</b> {1}<br>' +
                            '<b>FileSize:</b> {2} bytes',
                            result.msg, name, size);

                    Ext.Msg.alert('Success', message);
                },
                failure: function (f, a) {
                    Ext.Msg.alert('Failure', a.result.msg);
                }
            });
        }
    }
}]

带有进度窗口的现场演示是here

【讨论】：

【解决方案3】：

要显示实际进度，您可以使用 XMLHttpRequest 的 onprogress 回调：

Ext.override(Ext.data.request.Ajax, {
    openRequest: function (options) {
        var xhr = this.callParent(arguments);
        if (options.progress) {
            xhr.upload.onprogress = options.progress;
        }
        return xhr;
    }
});

然后在这里使用：

Ext.Ajax.request({
    url: '/upload/files',
    rawData: data,
    headers: { 'Content-Type': null }, //to use content type of FormData
    progress: function (e) {
        console.log('progress', e.loaded / e.total);
    }
});

查看在线演示here。

【讨论】：