您的位置:首页 > Web前端 > extjs > 正文

ExtJs中怎么上传文件

更多 时间:2013-10-10 类别:Web前端 浏览量:4742

ExtJs中怎么上传文件

ExtJs中怎么上传文件

下面为大家介绍在ExtJs中上传文件的几种方法

 

第一种方法:传统的上传方式


在formpanal中增加一个fileUpload的属性
 

例子代码:

 

  •  
  • JScript 代码   复制
  •  
      Ext.onReady(function(){ 
      
       var form = new Ext.form.FormPanel({ 
          renderTo:'file',
          labelAlign: 'right', 
          title: '文件上传', 
          labelWidth: 60, 
          frame:true,
          url: 服务器处理上传功能的url地址,//fileUploadServlet 
          width: 300, 
          height:200,
          fileUpload: true,   
    
          items: [{ 
             xtype: 'textfield', 
             fieldLabel: '文件名', 
             name: 'file', 
             inputType: 'file'//文件类型 
           }], 
          
         buttons: [{ 
             text: '上传', 
             handler: function() { 
             form.getForm().submit({ 
             success: function(form, response){ 
                Ext.Msg.alert('信息', response.result.msg); 
             }, 
            failure: function(){ 
               Ext.Msg.alert('错误', '文件上传失败'); 
            } 
          }); 
         } 
       }] 
       }); 
    
       }); 
    
    		
  •  

    第二种方法:借助Ext.ux.UploadDialog.Dialog的组件,在编码时需要导入两个文件

    需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed脚本文件。

     

    例子代码

     

  •  
  • JScript 代码   复制
  • 
    //在使用此方法进行文件上传时,其后台往页面的返回值类型是这样的: 
    //{'success':true,'message':'上传成功'} 
    //如果没有success:true,无论上传成功与否,显示的都是上传失败,其实这个和form.submit()的提交方式是一个道理。 
    
    var dialog = new Ext.ux.UploadDialog.Dialog({  
                   autoCreate: true,  
                   closable: true,  
                   collapsible: false,  
                   draggable: true,  
                   minWidth: 400,        
                   minHeight: 200,  
                   width: 400,  
                   height: 350,  
                   permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],  
                   proxyDrag: true,  
                   resizable: true,  
                   constraintoviewport: true,  
                   title: '文件上传',  
                   url:用于处理上传文件功能的Url,
                   reset_on_hide: false,  
                   allow_close_on_upload: true ,
                   upload_autostart: false 
                });  
    //定义上传文件的按钮
    var btnShow = new Ext.Button({
            text:'上传文件',
            listeners:{
                click:function(btnThis,eventobj){
                    dialog.show();
                }
            }
      });
    
    			
  •  

    标签:ExtJs 上传