forms - Extjs文件上传进度

Question

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

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

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

Answer 1

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

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

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

---

如果您真的需要这种用户体验，您可以尝试使用3rd 方组件。

---

引用文档：

文件上传不是使用普通的“Ajax”技术执行的，也就是说它们不是使用 XMLHttpRequests 执行的。取而代之的是，表单以标准方式提交，并临时修改了 DOM 元素，使其目标设置为引用动态生成的隐藏对象，该对象被插入到文档中，但在收集到返回数据后被删除。

Answer 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);
                }
            });
        }
    }
}]

带有进度窗口的现场演示在这里

Answer 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);
    }
});

在此处查看在线演示。