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 李晓晴