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

发表于2015-07-17 15:28:52| --次阅读| 来源webkfa| 作者js,javascript

摘要：一.首先我们看看官方给出的插件的解释：一个文件上传表单项具有自定义的样式，并且可以控制按钮的文本和像文本表单的空文本类似的其他特性。它使用一个隐藏的文件输入元素，并在用户选择文件后在form提交的同时执行实际的文件上传。因为没有安全的跨浏览器以编程的方式对file表单项设值的方式, 所以标准表...

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

一个文件上传表单项具有自定义的样式，并且可以控制按钮的文本和像文本表单的空文本类似的其他特性。它使用一个隐藏的文件输入元素，并在用户选择文件后在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上传文件的控件了。

效果图如下图所示：