Extjs 使用fileupload插件上传文件带进度条显示

一.首先我们看看官方给出的插件的解释：

一个文件上传表单项具有自定义的样式，并且可以控制按钮的文本和像文本表单的空文本类似的其他特性。它使用一个隐藏的文件输入元素，并在用户选择文件后在form提交的同时执行实际的文件上传。

因为没有安全的跨浏览器以编程的方式对file表单项设值的方式, 所以标准表单项的 setValue 方法是无效的。 getvalue方法的返回值取决于使用何种浏览器; 一些仅仅返回文件名, 一些返回一个完整的文件路径, 一些则返回文件的虚拟路径。

二.在我看来这个插件就是在使用Ext的时候需要用到上传文件时的最好选择，能够做出效果，实现功能就是王道。

三.下面我们就看看实际运用的代码，我会在在难懂的地方做出解释，希望对大家的理解有所帮助。

uploadEvent:function(){ //自定义点击“上传”时触发的事件。    var me =this;    var uploadArea = Ext.create('Ext.form.Panel', {      title : '',      width : 350,height:105,      bodyPadding : 10,      margin:'-15 0 0 -20',      frame : false,      fileUpload: true,      items : [{        xtype : 'filefield',        name : 'file',        id:'fileinput',        margin:'5 0 0 0',        fieldLabel : '文件路径',        labelWidth : 60,        msgTarget : 'side',        allowBlank : false,        anchor : '100%',        buttonText : '请选择文件'      }],      buttons : [{        text : '上传',margin:'0 10 25 0',              handler : function() {          var url = me.getUrl('flow_check/flow_new');          var form = uploadArea.getForm();          Ext.MessageBox.show({  //显示上传的提示信息的窗口，有了此方法，下面的Ext.MessageBox.updateProgress函数才能使用            title: '请稍等',             msg: '正在上传...',             progressText: '',             width:300,             progress:true,  //这个也是和Ext.MessageBox.updateProgress函数想对应的，必须设置为true            closable:false,             animEl: 'loding'           });           var updateProgress = function (progress) {            if (progress >= 1) {              Ext.MessageBox.updateProgress(1, "处理完成");              return;            }            Ext.MessageBox.updateProgress(progress,     Math.round(progress * 100) + "%");//动态在进度条显示百分比            Ext.defer(function () {//延迟500毫秒执行一次下面的函数。              updateProgress(progress + 0.1);            }, 500);           }          form.submit({//表单提交，ajax请求，配置上传成功与失败的函数事件。            url: url,            method: 'POST',            success: function(f,a) {              var result = Ext.JSON.decode(a.response.responseText);              if(result.success == true){                me.fileName = result.data.filename;                me.fileUrl = result.data.url;                Ext.getCmp('uploadWindow').destroy();                Ext.getCmp('txt_filename').setText(me.fileName);              }              Ext.MessageBox.alert("提示：",result.msg);            },            error: function() {            }          });        }      }]    });    Ext.create('Ext.Window', {//创建弹出的窗口，items设置为上面定义的uploadArea。      title: '上传文件',      id:'uploadWindow',      width:350,      height:140,      autoShow: true,       modal: true,      y: 200,      bodyCls: 'um-create-form',      items: uploadArea,      animateTarget: event.target    });  }

这样就能够实现一个带进度条的extjs上传文件的控件了。

效果图如下图所示：