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上传文件的控件了。

效果图如下图所示：

教程完了，大家还有什么不懂的，可以继续提问。希望对大家有帮助。谢谢支持！