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" onchange="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")@ResponseBodypublic 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;}