spring mvc 文件、图片上传（极简）ajaxFileUpload

没想到做个图片上传耽误这么长时间，特此整理。

基于springMVC后端框架。

前端使用jQuery插件ajaxFileUpload.js。

参考文章：spring mvc(注解)上传文件的简单例子

只提供核心代码，格式过滤，存储目录，回显和样式等自己加代码实现。

html/jsp代码片段

引入文件ajaxfileupload.js

<script type="text/javascript" src="/js/lib/ajaxfileupload.js"></script>

功能部分代码（通过调样式达到自己想要的效果）

<div class="wl-box">
   <input type="file" id="uploadFile" name="file" οnchange="ajaxFileUpload()" />
</div>

js代码，注意enctype:'multipart/form-data',//注意一定要有该参数

function ajaxFileUpload() {
    $.ajaxFileUpload({
        url: webContext + '/act/uploadPic', //服务器端请求地址
        secureuri: false, //是否需要安全协议，一般设置为false
        fileElementId: 'uploadFile', //文件上传域的ID
        dataType: 'json', //返回值类型 一般设置为json
        enctype:'multipart/form-data',//注意一定要有该参数
        success: function (data, status)  //服务器成功响应处理函数
        {
            alert(data);       //data是从服务器返回来的值
            alert('上传图片成功!图片地址'+webContext + "/upload/"+data);
            $("#imghead").attr("src", webContext + "/upload/"+data);
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
            alert(e);
        }
    })
}

后端java代码

@RequestMapping("/uploadPic")
@ResponseBody
public String uploadPic(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletRequest request) throws Exception {
    String path = request.getSession().getServletContext().getRealPath("upload");
    String fileName = file.getOriginalFilename();
    String fileNameStr = (new Date().getTime())+"__"+fileName;
    File targetFile = new File(path, fileNameStr);
    if(!targetFile.exists()){
        targetFile.mkdirs();
    }
    //保存
    try {
        file.transferTo(targetFile);
    } catch (Exception e) {
        e.printStackTrace();
    }
    return fileNameStr;
}