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

效果图如下图所示：

 

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