`
fackyou200
  • 浏览: 302295 次
  • 性别: Icon_minigender_1
  • 来自: 山西太原
社区版块
存档分类
最新评论

Struts2 、jquery之ajaxfileupload异步上传插件

jQueryjsonStrutsJavaScriptApache 
阅读更多

由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址：http://www.phpletter.com/download_project_version.php?version_id=6
服务器端采用struts2来处理文件上传。
所需环境：
jquery.js
ajaxfileupload.js
struts2所依赖的jar包
及struts2-json-plugin-2.1.8.1.jar
编写文件上传的Action

package com.ajaxfile.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class FileAction extends ActionSupport {

    private File file;
    private String fileFileName;
    private String fileFileContentType;

    private String message = "你已成功上传文件";
    
    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public File getFile() {
        return file;
    }

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

    public String getFileFileName() {
        return fileFileName;
    }

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

    public String getFileFileContentType() {
        return fileFileContentType;
    }

    public void setFileFileContentType(String fileFileContentType) {
        this.fileFileContentType = fileFileContentType;
    }

    @SuppressWarnings("deprecation")
    @Override
    public String execute() throws Exception {
        
        String path = ServletActionContext.getRequest().getRealPath("/upload");

        try {
            File f = this.getFile();
            if(this.getFileFileName().endsWith(".exe")){
                message="对不起,你上传的文件格式不允许!!!";
                return ERROR;
            }
            FileInputStream inputStream = new FileInputStream(f);
            FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
            byte[] buf = new byte[1024];
            int length = 0;
            while ((length = inputStream.read(buf)) != -1) {
                outputStream.write(buf, 0, length);
            }
            inputStream.close();
            outputStream.flush();
        } catch (Exception e) {
            e.printStackTrace();
            message = "对不起,文件上传失败了!!!!";
        }
        return SUCCESS;
    }

}

 

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="struts2" extends="json-default">
        <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
            <result type="json" name="success">
                <param name="contentType">
                    text/html
                </param>
            </result>
            <result type="json" name="error">
                <param name="contentType">
                    text/html
                </param>
            </result>
        </action>
    </package>
</struts>

 

注意结合Action观察struts.xml中result的配置。 

contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。
文件上传的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <script type="text/javascript">
    function ajaxFileUpload()
    {
        
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来
        
        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json',//返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                    
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.message);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        
        return false;

    }
    </script>
    </head>
    <body>
        <img src="loading.gif" id="loading" style="display: none;">
        <input type="file" id="file" name="file" />
        <br />
        <input type="button" value="上传" onclick="return ajaxFileUpload();">
    </body>
</html>

 

注意观察<body>中的代码，并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序，ajaxfileupload.js依赖于jquery因此你知道的。

分享到：
| 使用CSS自动截取字符长度并添加为省略号
评论
6 楼 tiancai2 2013-10-19  
如果在action中定义不是string类型的，而是一个Person类型的，它有两个属性，name,password；那么在前台如何获取name属性值，我用的是data.person2.name;person2是Person的一个的对象，但是这个方法也不行，所有还望博主请教，该如何获取？
5 楼 tiancai2 2013-10-19  
如果在action中定义不是string类型的，而是一个Person类型的，它有两个属性，name,password；那么在前台如何获取name属性值，我用的是data.person2.name;person2是Person的一个的对象，但是这个方法也不行，所有还望博主请教，该如何获取？
4 楼 平安一生 2013-02-04  

回博主：
在action中并没有定义名为error的属性，if(typeof(data.error) != 'undefined')  的判断只能是false，也就是说此处之所以还会alert返回的message，完全归功于31行alert(data.message);
请博主鉴定！
回复1楼：
如何才能让ajaxfileupload真正判断出返回结果是success还是error，而不是全都视为success。
你可以试试在action的处理方法中触发一个异常，返回到前台的信息应该是error
3 楼 liuInsect 2012-03-08  
为什么action里面的file 这个属性是null???
2 楼 ywlqi 2011-01-17  
回复1楼，虽然没有看过源代码，但应该不会错，ajaxfileupload的success 和 error句柄是根据http返回状态决定的，即200，都认为是成功，action 的 success 和 error两个result是在代码中控制的，属于业务逻辑上的success和error，返回状态都是200，所以ajaxfileupload都会调用success方法，要想调用error方法，需要抛出异常，例如500
其实怎么处理返回结果，还是要看具体的业务需求，我觉得action中返回error，是业务逻辑上发生了错误，属于正常情况，返回200是合理的，相应的，ajaxfileupload中if(typeof(data.error) != 'undefined') 的判断也是合理的
1 楼 lc87624 2011-01-05  
文章很受用 谢谢博主~

我有个问题想请教下。
action里SUCCESS和ERROR两个result好像本质并没有什么不同，返回到JavaScript里，ajaxfileupload均会视为success，而博主好像是通过alert显示不同的message信息来区分成功与否，alert之前有if(typeof(data.error) != 'undefined')  的判断，可是action中并没有定义名为error的属性，此处貌似会因为判断不通过而不alert任何信息。

我想问的是，如何才能让ajaxfileupload真正判断出返回结果是success还是error，而不是全都视为success。

可能说得不太明白，还望博主费心看一下~
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics