正文

Extjs文件上传进度

 2023-02-24  179

关键词：

【中文标题】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。

【讨论】：

Extjs - 使用文件字段上传文件

】Extjs-使用文件字段上传文件【英文标题】：Extjs-uploadfileusingfilefield【发布时间】：2013-06-2008:27:31【问题描述】：我的extjs代码如http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.File.htmlExt.create(\'Ext.form.Panel\',title:\'U 查看详情

ExtJS 3 - 文件上传

】ExtJS3-文件上传【英文标题】：ExtJS3-FileUpload【发布时间】：2014-03-0412:31:50【问题描述】：如何使用ExtJS3上传文件？我看过这个例子：UploadFileExample但这似乎是一个Ext4示例。有人知道吗？【问题讨论】：在extJS3.3.1link上获得了这... 查看详情

extjs文件上传问题总结

　　本来文件上传是一个简单而常用的功能，但是，由于刚刚接触extjs，对extjs中的控件及其使用方法并不熟悉，导致本来一个很快就可以搞定的文件上传问题，弄了将近两天的时间。现将问题及解决办法发出来，供有相同烦恼... 查看详情

jQuery 上传进度和 AJAX 文件上传

】jQuery上传进度和AJAX文件上传【英文标题】：jQueryUploadProgressandAJAXfileupload【发布时间】：2011-06-1822:04:45【问题描述】：我似乎没有清楚地表达我的问题。我需要发送一个文件（使用AJAX），我需要使用NginxHttpUploadProgressModule获取... 查看详情

jQuery 上传进度和 AJAX 文件上传

文件上传和进度条

】文件上传和进度条【英文标题】：Fileuploadandprogessbar【发布时间】：2013-01-2114:01:05【问题描述】：我想在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但... 查看详情

extjs上传文件

... 我之前用的是EasyUI上传的工作流部署的压缩文件，现在想用ExtJs来做。废话不多说，上明码。查看详情

js文件上传进度条

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>XMLHttpRequest上传文件进度实现</title><scripttype="text/javascript">varxhr;varot;//varoloaded;//上传文件方法functionUp 查看详情

文件上传进度条[重复]

】文件上传进度条[重复]【英文标题】：Fileuploadprogressbar[duplicate]【发布时间】：2011-04-0611:20:21【问题描述】：可能重复：UploadProgressBarinPHP任何人都可以建议一种在上传文件时包含文件上传进度条的好方法。我知道这将是javascript... 查看详情

使用 jQuery 的文件上传进度条

】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情

使用 jQuery 的文件上传进度条

文件上传进度条干扰控制器重定向

】文件上传进度条干扰控制器重定向【英文标题】：FileuploadprogressbarinterfereswithControllerredirect【发布时间】：2021-11-1610:23:43【问题描述】：我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的javascript会干扰... 查看详情

通过后处理上传进度

...【问题描述】：我有一个上传表单，用户可以在其中上传文件。上传完成后，对文件进行后处理，有时上传完成后处理需要10-15秒。上传完成后，进度条为100%，但如何检测文件何时完成，因此您可以在文件处理时向用户显示“请... 查看详情

extjs列表中文件上传与下载（带有重命名操作）

下面是extjs列表中文件上传与下载：如图：一、上传上传按钮：{xtype:‘button‘,width:60,margin:‘020‘,text:‘上传‘,handler:‘onUploadClick‘}]上传按钮事件（打开上传窗口和传参）：onUploadClick:function(){varme=this,view=me.getView(),vm=view.getViewM... 查看详情