论坛首页 AJAX版 EXT

ExtJS2.0+struts实现文件上传

浏览 2353 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
最后更新时间:2008-03-22
Extjs+struts实现文件上传
本人最近一直在研究extjs,感觉其功能强大复杂,前段时间做了个项目,要使用extjs实现文件上传,下面写出研究成果,与各位一起分享。
1.fileUpload.js

 Ext.onReady(function(){ 
  
   var form = new Ext.form.FormPanel({ 
      renderTo:'file',
      labelAlign: 'right', 
      title: '文件上传', 
      labelWidth: 60, 
      frame:true,
      url: '../upload.do?op=uploadFile',//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, action){ 
            Ext.Msg.alert('信息', '文件上传成功!'); 
         }, 
        failure: function(){ 
           Ext.Msg.alert('错误', '文件上传失败'); 
        } 
      }); 
     } 
   }] 
   }); 

   }); 

2.uploadAction.java   其中使用了cos上传组件,下载地址:http://www.servlets.com/cos/cos-05Nov2002.zip

package zx.struts.actions;

import java.io.File;
import java.util.Enumeration;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

import com.oreilly.servlet.MultipartRequest;


public class UploadAction extends DispatchAction{
	public ActionForward uploadFile(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)throws Exception {

		
		String saveDirectory ="F:\\jboss-4.2.2.GA\\server\\default\\deploy\\userDemo.war\\upload";      //文件上传后,保存的位置

		int maxPostSize =3 * 5 * 1024 * 1024 ;   //每个文件最大5MB,最多3个文件,所以... 
      
		//response的编码为"gb2312"
		MultipartRequest multi = 
		       new MultipartRequest(request, saveDirectory, maxPostSize, 
		                            "gb2312"); 

        //输出反馈信息 
		 Enumeration files = multi.getFileNames();  
		     while (files.hasMoreElements()) { 
		       
		       String name = (String)files.nextElement(); 
		       File f = multi.getFile(name); 
		       if(f!=null){ 
		         String fileName = multi.getFilesystemName(name); 
		         String lastFileName= saveDirectory+"\\" + fileName; 
		         System.out.println("上传的文件:"+lastFileName); 
		         

		       } 
		     } 

    
   return null;
}
}
   
最后更新时间:2008-03-26
items: [{  
        xtype: 'textfield',  
        fieldLabel: '文件名',  
         name: 'file',  
         inputType: 'file'//文件类型  
       }],
这个用法我试过,不过我的是struts2情况下,request里面什么什么都没有的,解析的代码如下
<div class="x-form-item" tabindex="-1">
<label class="x-form-item-label" style="width: 90px;" for="ext-comp-1080">Select File to Upload:</label>
<div id="x-form-el-ext-comp-1080" class="x-form-element" style="padding-left: 95px;">
<input id="ext-comp-1080" class="x-form-file x-form-field" type="file" name="attachments" autocomplete="off" size="20" style="width: 200px;"/>
</div>
<div class="x-form-clear-left"/>
</div>
   
0 请登录后投票
最后更新时间:2008-04-17
我也遇到了这个问题,楼主能不能把后台改成Struts2试验一下
   
0 请登录后投票
最后更新时间:2008-07-14
我做了一个struts2的
但是有个问题,form.reset()方法对这个 textField无效,不能重设成空

部分核心代码如下
......................
//图片上传
var logoUploadField = new Ext.form.TextField({
	id:'logoUploadField',
	fieldLabel:'游戏LOGO图片',
	name : 'picture',
	anchor : '90%',
	height: 20,
	inputType:'file'
	}
);
...................
var addForm = new Ext.FormPanel({
         id:'addForm',
	labelAlign : 'top',
	frame : true,
	width : 500,
	//labelWidth : 70,
	url : 'test.action',
	fileUpload: true,

	items : [{
		layout : 'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
		items : [{// 第一列
			columnWidth : 0.5,
			layout : 'form',
			items : [
							gamenameField,developerField,playtypeField
						]

					}, {	// 第二列
						columnWidth : 0.5,
						layout : 'form',
						items : [
							serialField,priceField,typeIdField

						]
					}]
				},logoUploadField,introductionField],

				buttons : [{
					text : '保存',
					disabled : false,
					handler : function() {
						if (addForm.form.isValid()) {
							addForm.form.submit({
								//url : 'AddLevel.action',
								success : function(form, action) {
									form.reset();
									//introductionField.setValue("");
									//logoUploadField.setValue("");
									Ext.MessageBox.alert('保存成功', '222222添加游戏成功!');

								},
								failure : function(form, action) {
									//introductionField.setValue("");
									//logoUploadField.setValue("");
									Ext.MessageBox.alert('保存失败', '添加游戏失败!');
								},
								waitMsg : '正在保存数据,稍后...'
							});

							addGameFormWin.hide();
						} else {
							Ext.Msg.alert('信息', '请填写完成再提交!');
						}
					}
				}, {
					text : '取消',
					handler : function() {
						//addForm.getForm().reset();
						addGameFormWin.hide();
					}
				}]
			});


action代码如下:
public class ConsoleGameAction extends ActionSupport {

	private String gamename;
	private String serial;
	private String developer;
	private String price;
	private String typeId;
	private String playtype;
	private String introduction;
	private File picture;
	private String pictureContentType;
	private String pictureFileName;
	private String savePath;

	private String jsonString;

	private GameService gameService;


	public String addGame() throws Exception{
		FileOutputStream fos = new FileOutputStream(getSavePath() + "\\" + getPictureFileName());
		FileInputStream fis = new FileInputStream(getPicture());
		byte[] buffer = new byte[1024];
		int len = 0;
		while((len = fis.read(buffer)) > 0){
			fos.write(buffer, 0, len);
		}
		StringBuilder temp = new StringBuilder("{success:true}");
		this.jsonString = temp.toString();
		return SUCCESS;
	}



	public String getGamename() {
		return gamename;
	}

	public void setGamename(String gamename) {
		this.gamename = gamename;
	}

	public String getSerial() {
		return serial;
	}

	public void setSerial(String serial) {
		this.serial = serial;
	}

	public String getDeveloper() {
		return developer;
	}

	public void setDeveloper(String developer) {
		this.developer = developer;
	}

	public String getPrice() {
		return price;
	}

	public void setPrice(String price) {
		this.price = price;
	}

	public String getTypeId() {
		return typeId;
	}

	public void setTypeId(String typeId) {
		this.typeId = typeId;
	}

	public String getPlaytype() {
		return playtype;
	}

	public void setPlaytype(String playtype) {
		this.playtype = playtype;
	}

	public String getIntroduction() {
		return introduction;
	}

	public void setIntroduction(String introduction) {
		this.introduction = introduction;
	}

	public File getPicture() {
		return picture;
	}

	public void setPicture(File picture) {
		this.picture = picture;
	}



	public String getPictureContentType() {
		return pictureContentType;
	}

	public void setPictureContentType(String pictureContentType) {
		this.pictureContentType = pictureContentType;
	}

	public String getPictureFileName() {
		return pictureFileName;
	}

	public void setPictureFileName(String pictureFileName) {
		this.pictureFileName = pictureFileName;
	}

	@SuppressWarnings("deprecation")
	public String getSavePath() {
		return ServletActionContext.getRequest().getRealPath(savePath);
	}

	public void setSavePath(String savePath) {
		this.savePath = savePath;
	}

	public String getJsonString() {
		return jsonString;
	}


	public void setJsonString(String jsonString) {
		this.jsonString = jsonString;
	}


	public GameService getGameService() {
		return gameService;
	}

	public void setGameService(GameService gameService) {
		this.gameService = gameService;
	}



}


action配置
<action name="addgame" class="consoleGameAction" method="addGame">
			<param name="savePath">/upload</param>
			<result name="success">/WEB-INF/console/json_data.jsp</result>
		</action>
   
0 请登录后投票
论坛首页 AJAX版 EXT

跳转论坛:
JavaEye推荐