Ext 学习之简单学习快乐开发 文件上传

先引用js和css

<link type="text/css" rel="stylesheet" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

 然后复写样式表：

<style type="text/css">
.tabs {
	background-image:url("../desktop/images/tabs.gif") !important;
}
 .ux-lovcombo-icon {  
     width:16px;  
     height:16px;  
     float:left;  
     background-position: -1px -1px ! important;  
     background-repeat:no-repeat ! important;  
 }  
 .ux-lovcombo-icon-checked {  
     background: transparent url(../ext/resources/images/default/menu/checked.gif);  
 }  
 .ux-lovcombo-icon-unchecked {  
     background: transparent url(../ext/resources/images/default/menu/unchecked.gif);  
 }
</style>

 然后写ext脚本引用弹出窗口

<script type="text/javascript">

	var i = 0;  
	var currentField;  
	
	//上传form  
   var uploadForm = new Ext.form.FormPanel({  
	   baseCls : 'x-plain',  
	   labelWidth : 80,  
//     layout:'fit',  
	   autoHeight:true,  
	   style:'margin-top:10',  
	   frame : true,  
	   disabledClass : "x-item-disabled",  
	   tbar : [{  
				   xtype : 'button',  
				   text : '添加上传',  
				   labelAlign : 'right',  
				   icon : "image/add_16.gif",  
				   handler : function() {  
					   var uf = getUploadField();  
					   uploadForm.add(uf);  
					   uploadForm.doLayout(true);  
					   upload_win.setHeight(upload_win.getHeight() + 47);  
				   }  
			   }, {  
				   xtype : 'label',  
				   text : '(单个最大允许上传50M)'  
			   }],  
	   //url : '',//__jadPath + '/sm/fileUploadAction!fileUpLoad.action',  
	   fileUpload : true,  
	   defaultType : 'textfield',  
	   items : [getUploadField()]  
   });  
   //alert(__jadPath);
	function getUploadField(callFun) {//增加一行文件框  
		var fileName = "文件 " + (++i) + " :  ";  
		var uploadFileTf = new Ext.form.TextField({  
			xtype : 'textfield',  
			columnWidth : .7,  
			name : 'file',  
			inputType : 'file',  
			allowBlank : false,  
			blankText : '请选择上传文件',  
			anchor : '90%'  
		});  
		var lbl = new Ext.form.Label({  
		   text : fileName,  
		   columnWidth : .15,  
		   style : 'font-weight:bold;vertical-align: middle'  
		});  
		var fieldSet = new Ext.form.FieldSet({  
		   layout : 'column',  
		   border : false  
		});  
		fieldSet.add(lbl);  
		fieldSet.add(uploadFileTf);  
		if (i != 1) {  
		   var deleteBtn = new Ext.Button({  
			   text : '删除',  
			   icon : "image/remove.png", 
			   columnWidth : .15,  
			   handler : function() {  
				   fieldSet.destroy();  
				   upload_win.setHeight(upload_win.getHeight() - 37);  
				   uploadForm.doLayout(true);  
			   }  
		   });  
		   fieldSet.add(deleteBtn);  
	   }  
	   return fieldSet;  
   }  

   var upload_win = new Ext.Window({  
	   title: '文件上传',  
	   width: 500,  
	   layout: 'fit',  
	   plain: true,  
	   bodyStyle : 'padding:5px;',  
	   buttonAlign : 'center',  
	   items: uploadForm,  
	   resizable : false,  
	   closeAction : 'close',  
	   iconCls: 'tabs',
	   loadMask : true,  
	   autoHeight: true,
	   height:160,  
	   buttons : [{  
			text : '开始上传',  
			icon : "image/upload.png",  
			handler : function() {  
				if (uploadForm.form.isValid()) {  
				   Ext.MessageBox.show({  
					   title : 'Please wait',  
					   msg : '上传中...',  
					   progressText : '- - - -上传中- - - -',  
					   width : 300,  
					   progress : true,  
					   closable : false,  
					   animEl : 'loding'  
					});  
					uploadForm.getForm().submit({ 
						url : '/uploadFileAttach.action', 
					   success : function(form, action) {  
						   var result = Ext.util.JSON.decode(action.response.responseText);  
						   Ext.Msg.alert('信息提示', result.message);  
						   var fn = callFunc.createCallback(result);  
						   fn();  
						   upload_win.hide();  
					   },  
					   failure : function() {  
						  Ext.Msg.alert('信息提示', '文件上传失败');  
						  upload_win.show();  
					   }  
					})  
				}  
			}  
		}, {  
			  text : '关闭',  
			  icon : "image/btn-cancel.png",  
			  handler : function() {  
				  upload_win.hide();  
			  }  
		}]  
	});  
	
	upload_win.show();  
</script>

后台Java处理代码：
      /**
	 * 文件上传
	 * @return
	 */
	public String upload() {
		File uploadFileDir = new File(ServletActionContext.getServletContext().getRealPath(Constants.FILE_ATTACH_PATH+"/"+fileType));
		if (!uploadFileDir.exists())
			uploadFileDir.mkdirs();
		SimpleDateFormat sdFormat = new SimpleDateFormat("yyyyMMddhhmmssSSS");
		int i = 0;
		List<FileAttach> listFile = new ArrayList<FileAttach>();
		for (File fileItem : file) {
			// 原文件名
			String oldFileName = fileFileName.get(i++);
			// 新文件名
			String newFileName = sdFormat.format(new Date()) + i;
			// 文件后缀
			String suffix = null;
			int index = oldFileName.lastIndexOf('.');
			if (-1 != index) {
				suffix = oldFileName.substring(index + 1, oldFileName.length());
				newFileName += "." + suffix;
			}
			InputStream bis = null;
			OutputStream bos = null;
			try {
				FileInputStream fs = new FileInputStream(fileItem);
				bis = new BufferedInputStream(fs);
				bos = new BufferedOutputStream(new FileOutputStream(new File(
						uploadFileDir, newFileName)));

				byte[] buf = new byte[4096];
				int len = -1;
				while ((len = bis.read(buf)) != -1) {
					bos.write(buf, 0, len);
				}
				bos.flush();
			} catch (Exception e) {
				outJson("{success:false,message:'文件上传失败'}");
				e.printStackTrace();
				return null;
			} finally {
				try {
					if (null != bos)
						bos.close();
					if (null != bis)
						bis.close();
				} catch (IOException e) {
					e.printStackTrace();
				}
			}
			FileAttach file = file = new FileAttach();
			file.setCreateDate(new Date());
			file.setCreator("UNKown");
			file.setExt(suffix);
			file.setFileName(newFileName);
			file.setFilePath(Constants.FILE_ATTACH_PATH+"/"+fileType+"/"+newFileName);
			file.setFileType(fileType);
			file.setNote(" bytes");
			listFile.add(file);
		}
		try{
			this.fileAttachService.saveFiles(listFile);
			JSONObject jo=new JSONObject();
			jo.put("success", true);
			jo.put("list", listFile);
			jo.put("message", "上传完成！");
			outJson(jo.toString());
		}catch(Exception e){
			outJson("{success:false,message:'文件上传失败'}");
			e.printStackTrace();
		}
		return null;
	}