Extjs文件上传进度
我已经在ExtJS4中看到了表单文件上传的例子，我需要自定义文件上传的进度。
我看到了extjs属性，但我不想使用它，也不想使用waitMsg的第三方插件。
那么，如何从extjs中的upload表单中获取当前的上传进度呢？
回答 3
Stack Overflow用户
发布于 2013-01-21 22:22:49
waitMsg使用带有无限自动更新进度条的消息框。所以你不能仅仅创建一个进度条来显示当前上传的内容。
您可以创建自己的Ext.ProgressBar并估计上传时间，完成后将其设置为最大值。但我猜你不会想这样的。
回答你的问题: You You简单地跟踪当前的上传进度。
如果你真的需要这种用户体验，你可以试试3rd party component。
引用这些文档：
文件上传不是使用普通的"Ajax“技术执行的，也就是说，它们不是使用XMLHttpRequests执行的。相反，表单以标准方式提交，并临时修改DOM元素，使其目标设置为引用动态生成的隐藏对象，该对象被插入到文档中，但在收集返回数据后将其删除。
Stack Overflow用户
发布于 2014-02-20 20:10:03
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
Stack Overflow用户
发布于 2017-06-29 03:38:40
要显示实际进度，可以使用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。
https://stackoverflow.com/questions/14440118
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号