ExtJs文件上传组件（UploadDialog）

第一种方法：传统的上传方式
在formpanal中增加一个fileUpload的属性，

 Ext.onReady(function(){ 
  
   var form = new Ext.form.FormPanel({ 
      renderTo:'file',
      labelAlign: 'right', 
      title: '文件上传', 
      labelWidth: 60, 
      frame:true,
      url: '../UpLoadServlet',//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的组件，在编码时需要导入两个文件
<link rel="stylesheet" type="text/css" href="../../../js/extjs/UploadDialog/css/Ext.ux.UploadDialog.css" />
<script type="text/javascript" src="../../../js/extjs/UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
组件的使用发放如下

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:'../UpLoadServlet',
               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();
            }
        }
  });

在使用此方法进行文件上传时，其后台往页面的返回值类型是这样的：
{'success':true,'message':'上传成功'}
如果没有success:true，无论上传成功与否，显示的都是上传失败，其实这个和form.submit()的提交方式是一个道理。

后台就是最为普通的文件上传操作，还是附上代码吧,我用的是JspSmartUpload的上传组件，网上很多，建议下载个经过"汉化"的组件，因为官方的组件对于文件名为中文的上传不太支持，会出现乱码

	public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
        //往页面上传值
		String mess="";
	    SmartUpload su = new SmartUpload();     

	    try {   
	    //初始化操作	
	    su.initialize(this.getServletConfig(),request,response);   
	    su.upload(); 
	    com.jspsmart.upload.File file = su.getFiles().getFile(0);
        //获得上传的文件另存的路径
	    String uploadPath=request.getParameter("uploadPath");
	    //创建保存上传文件的文件夹
	    java.io.File f = new File(uploadPath) ;
		if(!f.exists()){   
		 f.mkdir();
		}
	    file.saveAs(file.getFileName());
	      mess="{'success':true,'message':'上传成功'}";
	    }
	    catch(Exception e){
		   e.printStackTrace();
		   mess="{'success':true,'message':'上传失败'}";
	    }

	    PrintWriter pw=response.getWriter();
		
		System.out.println(mess);
		pw.println(mess);
		pw.flush();
		pw.close();
	}   

文件上传的后台代码与普通的JSP+JAVABEAN+SERVLET上传操作几乎没有改动，大家只需要把前台的上传功能做好就OK了

本人也是刚开始学习ExtJs，参看了很多的资料，最后附上官方的实例demo
http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

评论

3 楼 雨的印迹 2014-07-18  

用了感觉很棒，但是汉化怎么搞？

2 楼 另一花生 2014-02-27  

非常感谢楼主的例子！

1 楼 xieweiting 2012-05-09  

我的不对啊，