Ext3.x FileUploadField 上傳文件 方法

首先導入需要的 js和css

<script type="text/javascript" src="../scripts/FileUploadField.js"></script> 
<link rel="stylesheet" type="text/css" href="../css/fileuploadfield.css"></link>

前邊js頁面代碼

        fp = new Ext.FormPanel( {  
                   renderTo : Ext.getBody(),  
                   fileUpload : true,  
                   width : 323,  
                   frame : true,  
                   autoHeight : true,  
                   bodyStyle : '',   
                   labelWidth : 5,  
                   defaults : {  
                       anchor : '95%',  
                       allowBlank : false
                   },  
                     items : [  
                          new Ext.form.FileUploadField( {  
                          buttonText: '瀏覽...',  
                          emptyText: '請選擇一個imgage文件',  
                          name : 'file',  //注意這個name應該跟action中的接受一樣的名字
                          width : 310  
                       })   
                ],  
                    buttons : [ {  
                       text : '上傳',  
                       handler : function() {  
                          if (fp.getForm().isValid()) {  
                              fp.getForm().submit( {  
                                 method : 'post',  
                                 url :ctx+'/uploadEmployee',// 後臺處理的action  
                                 waitMsg : '操作處理中，請稍等...',  
                                 waitTitle:'請稍候',  
                                 success :function(fp,action){
                                    var res = Ext.util.JSON.decode(action.response.responseText);
                                    if(res.success){
                                        Ext.Msg.alert('Success', '添加圖樣成功 ');  
                                        Ext.getCmp("fitPicture").setValue(res.fileName).setDisabled(true);
                                        excelWindow.destroy();  
                                    }else{
                                        Ext.Msg.alert('Failure', '添加圖樣失敗 ');
                                        excelWindow.destroy(); 
                                    }
                                 },  
                                 failure : function(fp, action) {  
                                    var msg = action.response.responseText;  
                                    Ext.Msg.alert("提示", "Sorry，操作失敗，原因：" + obj.message);  
                                    excelWindow.destroy();  
                                 }  
                              });  
                            }  
                         }  
                     },{  
                            text: '重置',  
                            handler: function(){  
                                fp.getForm().reset();
                                Ext.getCmp("fitPicture").setDisabled(false);
                            }  
                        }]  
            }); 

            excelWindow = new Ext.Window( {  
                   renderTo : Ext.getBody(),  
                   closeAction : "hide",  
                   plain : true,
                   layout:'fit',
                   width : 310,  
                   title : "上傳圖樣",  
                   modal : true,  
                   items:[fp]  
            });
            excelWindow.show(); 

struts.xml配置文件如下

        <action name="uploadEmployee" class="com.edu.fzu.zemafd.util.UploadAction" method="uploadImages">  
           <interceptor-ref name="fileUpload">  
                  <param name="maximumSize">10485760</param>  
                  <param name="allowedTypes">
                    image/bmp,image/png,image/gif,image/jpeg,image/jpg,
                    image/pjpeg ,image/bmp, image/gif,image/x-png,
                  </param>  
           </interceptor-ref>  
           <interceptor-ref name="defaultStack"/>  
           <result name="success" type="json">  
                  <param name="root">all_result_list</param>
            </result>  
        </action>  

action代碼UploadAction.java

package com.edu.fzu.zemafd.util;

import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class UploadAction extends ActionSupport {
    /** 
     *  @author:yulong
     */
    private static final long serialVersionUID = 7944571812664822722L;
    private static final int BUFFER_SIZE = 16 * 1024;
    private File file; //注意這裏的file
    private String contentType;
    private String fileName;   
    private String imageFileName;
    private String caption;
    private HashMap<String, Object> all_result_list;

    public File getFile() {
        return file;
    }

    public void setFile(File file) {
        this.file = file;
    }

    public String getFileContentType() {
        return contentType;
    }

    public void setFileContentType(String contentType) {
        this.contentType = contentType;
    }

    public String getFileFileName() {
        return fileName;
    }

    public void setFileFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getImageFileName() {
        return imageFileName;
    }

    public void setImageFileName(String imageFileName) {
        this.imageFileName = imageFileName;
    }

    public String getCaption() {
        return caption;
    }

    public void setCaption(String caption) {
        this.caption = caption;
    }

    public static int getBufferSize() {
        return BUFFER_SIZE;
    }

    public HashMap<String, Object> getAll_result_list() {
        return all_result_list;
    }

    public void setAll_result_list(HashMap<String, Object> all_result_list) {
        this.all_result_list = all_result_list;
    }



    private static String getExtention(String fileName) {
        int pos = fileName.lastIndexOf(".");
        return fileName.substring(pos);
    }

    public String uploadImages() throws Exception {
        imageFileName = new Date().getTime() + getExtention(fileName);
        File imageFile = new File(ServletActionContext.getServletContext()
                .getRealPath("/upfile/images") + "/" + imageFileName);
        System.out.println(imageFile.getName());
        //copyFile(file, imageFile);
        all_result_list = new HashMap();
        try { // 使用了FileUtils工具類
            FileUtils.copyFile(file, imageFile);
            all_result_list.put("success", true);
            all_result_list.put("fileName", "/upfile/images/" + imageFileName);
        } catch (IOException e) {
            all_result_list.put("success", true);
            all_result_list.put("fileName", "");
            e.printStackTrace();
        }
        return SUCCESS;
    }

    public String uploadVideo() throws Exception {
        imageFileName = new Date().getTime() + getExtention(fileName);
        File imageFile = new File(ServletActionContext.getServletContext()
                .getRealPath("/upfile/videos") + "/" + imageFileName);
        System.out.println(imageFile.getName());
        //copyFile(file, imageFile);
        all_result_list = new HashMap();
        try { // 工具類
            FileUtils.copyFile(file, imageFile);
            all_result_list.put("success", true);
            all_result_list.put("fileName", "/upfile/images/" + imageFileName);
        } catch (IOException e) {
            all_result_list.put("success", true);
            all_result_list.put("fileName", "");
            e.printStackTrace();
        }
        return SUCCESS;
    }

}