Question

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

我看到waitMsg配置属性，但我不想使用它，我不想使用extjs第三方插件。

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

Answer 1

waitMsg使用带有无限自动更新进度条的消息框。因此，您不能只创建显示当前上传的进度条。

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

要回答您的问题：您无法只是跟踪当前的上传进度。

如果您确实需要此用户体验，可以尝试3rd party component。

引用文档：

不使用普通的“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);
                }
            });
        }
    }
}]

带有进度窗口的实时演示为here

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

参见在线演示here。

Extjs文件上传进度

3 个答案: