Extjs文件上传进度

Posted 2023-02-24

【中文标题】Extjs文件上传进度

【英文标题】：Extjs file upload progress

【发布时间】：2013-01-04 14:16:50

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

---

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

---

引用文档：

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

【讨论】：

我认为 extjs 处理文件 PUT 请求并且 xhr 必须返回要发送的字节......不是吗？

***.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。