ajax页面无刷新上传文件

最近在研究struts2文件上传，感觉这块无论是做企业网站还是做系统都用的挺多的，尤其是图片上传。但是上传我们又有几种方式，一种是表单提交，一种是ajax无刷新上传。
这次我要介绍的就是struts2+ajax无刷新上传图片，将图片存储在本地，图片将以路径的形式保存在数据库里，我们在读取的时候只需要读取图片路径，系统就会去所在路径找到对应图片并显示。
我们在做图片上传时除了基础的jar包外，还需用到struts2-json-plugin.jar。我用的是2.3.24版的。
本系统前端需要引入ajaxfileupload.js和jquery.min.js两个js控件。
正式流程如下：前端页面显示有file控件，点击file控件，找到上传图片，执行onchange事件，通过strtus的json在struts.xml中配置，然后在action中写入对应uploadfile方法，返回imageString图片路径。
关于前台页面的处理：
页面显示写法如下，a标签中class为样式,input的type为file文件类型：

<td colspan="2"><a href="javascript:;" class="a-upload">
   <input type="file" name="imgTitle" id="imgTitle"  onchange="uploadFile();"                   accept="image/gif,image/jpeg,image/jpg,image/png">点击这里上传文件</a>
<div id="images"></div></td>

样式如下：

.input{ border:1px solid #dbdbdb; width:256px; height:25px; line-height:25px;}
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #993300;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}
.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}
.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

点击onchange，执行js如下：

    function uploadFile() {
         if ($("#imgTitle").val().length > 0) {
             ajaxFileUpload();
         }
         else {
             alert("请选择图片");
         }
    }
function ajaxFileUpload() {
        var imgName = $("input[name='designProject.imgTitle']").val();
        $.ajaxFileUpload({
                url: 'admin/uploadFile', //用于文件上传的服务器端请求地址
                type: 'post',
                secureuri: false, //一般设置为false
                fileElementId: 'imgTitle', //文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'JSON', //返回值类型 一般设置为json
                data:{'oldImageString':imgName},
                success: function (imageString, status)  //服务器成功响应处理函数
                {
                    if(""!=imageString && "0"==imageString.substr(0,1)) {
                        alert(imageString.substr(1,imageString.length-1));
                        return false;
                    }
                    imageString = imageString.replace(/\\/g, '');
                    var aa="<img src="+imageString+" width='150px;' height='150px;' />";
                    aa += "<input type='hidden' value="+imageString+" id='imgTitle' name='designProject.imgTitle' />";
                    $("#images").html(aa);
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert("error="+e);
                }
            });
        return false;
    }

Struts2写法如下注意是json格式：

<package name="admin_json" namespace="/admin" extends="json-default">
<action name="uploadFile" class="designAction" method="uploadFile">
        <result type="json">
            <param name="root">imageString</param>
        <param name="contentType">text/html</param>
        </result>
</action>
</package>

Action写法如下：

private String imageString;
private File imgTitle; 
private String imgTitleFileName; // 文件名称
private String imgTitleContentType; // 文件类型
public String uploadFile() {
        try {           ServletActionContext.getRequest().setCharacterEncoding("UTF-8");
            String realpath = this.getClass().getClassLoader().getResource("").getPath();
            realpath = realpath.split("WEB-INF/classes")[0] + "uploadFile/";
            File savedir = new File(realpath);
            if (!savedir.getParentFile().exists())
                savedir.getParentFile().mkdirs();
            String looppath = "uploadFile/";
            Date datenew = new Date();
            SimpleDateFormat simpleDateFormatnew = new SimpleDateFormat("yyyyMMddhhmmss");
            imageString = "";
            if (imgTitle != null) {
                int last = imgTitleFileName.lastIndexOf(".");
                String type = imgTitleFileName.substring(last);
                if (!".jpg".equals(type.toLowerCase()) && !".jpeg".equals(type.toLowerCase())
                        && !".gif".equals(type.toLowerCase()) && !".png".equals(type.toLowerCase())) {
                    imageString = "0上传图片格式不正确，只能是jpg，gif，jpeg，png格式";
                    return SUCCESS;
                }
                imgTitleFileName = simpleDateFormatnew.format(datenew) + "_00" + type;
                File savefile = new File(savedir, imgTitleFileName);
                FileUtils.copyFile(imgTitle, savefile);
                imageString = looppath + imgTitleFileName;
            }catch (Exception e) {
            e.printStackTrace();
        }
        return SUCCESS;

Java类中全局变量需要有对应的get和set方法。最后返回前端的为imageString图片路径，该图片路径用于保存至数据库的路径。需json传值至前端，在form表单提交整体信息的时候提交即可。

created by 李晓晴