Struts2+Ajax表单及图片提交上传

1. 前端form表单

<form id="addFeedbackForm" enctype='multipart/form-data'>
    <div class="form-group">
        作者：<span id="loginName"></span>
    </div>
    <div class="controls">
        <textarea id="describe"></textarea>
    </div>
        <input id="f_upload" name="image" type="file" class="file" multiple />
    <div class="pull-left">
        <button type="button" id="submitButton" onclick="addTestReport()" >提交</button>
    </div>
</form>

 

2. Jquery+Ajax

     function addTestReport(){
        //var formData = new FormData($("#addFeedbackForm"));我也不知道为什么这种写法时而好使时而不好使
        //var formData = new FormData($("#addFeedbackForm")[0]); 其实这么写就行，自动获取你已经填写的表单数据，不用一个一个再往里放了
        var formData = new FormData(); //创建了空FormData对象，手动封装需要的数据
         if($("#f_upload")[0].files.length==1){ //如果只上传了一张图片
             formData.append("image",$("#f_upload")[0].files[0]);
                            //第一个参数代表后台文件属性名，第二个参数表示html中input的id
         }else{
             for(var i=0; i<$("#f_upload")[0].files.length;i++){ //如果上传了多张图片
                 formData.append("image",$("#f_upload")[0].files[i]); //多个文件上传
              }
         }
         formData.append("describe",$('#describe').val()); //将文本域对象也传入formdata中
         formData.append("loginName",$('#loginName').text());
         $.ajax({
            type:'post',
            url:'../../tmarket/addTestReport.action',
            data:formData,
            contentType: false, //必写
            processData: false, //必写
            success:function(){
                alert("添加成功！");
            },
            error:function () {
                alert("添加失败！");
            }
         });
    }

 

3. 服务端

默认情况下，FileUpload拦截器为你提供三个参数，它们分别按以下方式命名：

• [文件名参数] - 这是用户已上传的实际文件。在这个例子中它将是“myFile”

• [文件名参数]ContentType - 这是上传的文件的内容类型。在这个例子中，它将是“myFileContentType”

• [文件名参数]FileName - 这是上传的文件的名称。在这个例子中，它将是“myFileFileName”

得益于Struts拦截器这三个参数均可供我们使用。我们要做的是在Action类中创建三个带有正确名称的参数，并使这些变量可以自动连接。

① 在action中声明三个变量，然后生成get、set方法

private File file;
private String fileFileName;
private String fileContentType;

 

注意，这三个变量的名字不能乱写，否则后台获取不到，必须是这个格式的。如果你在表单的名字叫image，那个变量名字就应该是：

private File image;
private String imageFileName;
private String imageContentType;
 

    private File[] image;
    //文件类型
    private String[] imageContentType; //文件（一张图片就·是对象，多张图片就是数组）
    //文件名
    private String[] imageFileName;
    //目录
    private String destPath;
    
    public File[] getImage() {
        return image;
    }
    public void setImage(File[] image) {
        this.image = image;
    }
    public String[] getImageContentType() {
        return imageContentType;
    }
    public void setImageContentType(String[] imageContentType) {
        this.imageContentType = imageContentType;
    }
    public String[] getImageFileName() {
        return imageFileName;
    }
    public void setImageFileName(String[] imageFileName) {
        this.imageFileName = imageFileName;
    }
 

    public void addTestReport(){
        if(image!=null) { //成功获取上传的图片
            String filePath = "/fileupload/upload/files/";
                HttpServletRequest request = ServletActionContext.getRequest();//项目实际发布路径
                String path =                     
                       request.getSession().getServletContext().getRealPath(filePath);
                        
                for(int i=0;i<image.length;i++){ //遍历存储上传的图片
                    String fileName = AppPackageUtil.getUUID(); //生成UUID
                    String fiType = imageContentType[i].split("/")[1]; //文件后缀名
                    String newFileName = fileName + "." + fiType; //UUID+文件后缀名
                    File destFile = new File(path, newFileName);
                    boolean b = destFile.setWritable(true, false);
                    FileUtils.copyFile(image[i], destFile);
                    String md5 = AppPackageUtil.getMd5ByFile(image[i]);
                    UploadFile uploadFile = new UploadFile();
                    uploadFile.setFileOldName(imageFileName[i]);
                    uploadFile.setUploadDate(new Date());
                    uploadFile.setDeleteFlag("0");
                    uploadFile.setMD5(md5);
                    uploadFile.setFileSize(destFile.length());
                    uploadFile.setFileName(newFileName);
                    uploadFile.setUrl(filePath = filePath + newFileName);
                    super.save(uploadFile, true);
                }
            }
                        //存储表单域对象
            TProjectTest test = new TProjectTest();
            test.setDescribe(super.getParameter("describe",""));
            test.setResponsibilityName(super.getParameter("loginName",""));
            test.setCreateAt(new Date());
            super.save(test, true);
}