Forms Extjs文件上载进度

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

我看到了waitMsg config属性，但我不想使用它，也不想使用extjs第三方插件

---

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

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

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

回答您的问题：您不能只跟踪当前上载进度

---

如果你真的需要这种用户体验，你可以试试

---

引用文件：

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

按钮：[{
文本：“上传”，
处理程序：函数（）{
var form=this.up（'form'）.getForm（）；
if（form.isValid（））{
提交表格({
url:“/upload/file”，
waitMsg:'正在上载您的文件…'，
成功：功能（f，a）{
var result=a.result，
data=result.data，
name=data.name，
size=data.size，
message=Ext.String.format（'message:{0}
'+
'文件名：{1}
'+
'文件大小：{2}字节'，
result.msg、名称、大小）；
Ext.Msg.alert（“成功”，消息）；
},
故障：功能（f，a）{
Ext.Msg.alert（'Failure'，a.result.Msg）；
}
});
}
}
}]

---

带有进度窗口的实时演示是

要显示实际进度，您可以使用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);
    }
});

---

请参阅在线演示。

我认为extjs处理文件放置请求，xhr必须返回要发送的字节。。。不这里讨论了关于XHR的这个问题。如何从extjs获取请求xhr对象？很抱歉。我希望我们能轻松地做到；）我们可以向Sencha发送请求：-）检查Ivan Novakov（）提供的Ext JS v4.x的第三方文件上传小部件；以及由Bugs Bunny（）编辑的Ext JS v5.x的相同分叉小部件。

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