Extjs文件上传进度

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

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

那么，我怎样才能简单地从上传表单在extjs上传进度？

来源

2013-01-21 xercool

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

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

回答你的问题：你不能只是跟踪当前的上传进度。

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

引述文档：使用正常的“Ajax”的技术，不进行

文件上传，这是他们没有使用XMLHttpRequest的执行。而是以标准方式提交的格式为，DOM元素被临时修改为其目标集被设置为指的是生成的，隐藏的，其被插入到文档中，但在收集返回数据之后删除。

来源

2013-01-21 14:22:49 A1rPun

我想extjs处理文件PUT请求和xhr必须返回字节发送...不是？ – xercool

http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest关于这里讨论的XHR的这个问题。我怎样才能从extjs获得请求xhr对象？ – xercool

so .. that's bad（。谢谢 – xercool

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

来源

2014-02-20 12:10:03 khmurach

为了展示真正的进展，你可以使用onprogress的XMLHttpRequest的回调：

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。

来源

2017-06-28 19:38:39 khmurach

Extjs文件上传进度

回答

相关问题