之前有说了一种以base64的图片上传形式，这次来说说另外一种，其实很简单，很早以前都是在form提交的时候再controller中处理，现在基本不会这么做，都是通过ajax来实现异步上传的
首先需要引入jquery.ui.widget.js以及jquery.fileupload.js这两个js，
HTML代码：
<div>
<input id="idcardImagePositiveFileUpload" type="file" name="idcardImagePositiveFileUpload" data-url="<%=request.getContextPath() %>/file/upload.action" accept=".png,.jpeg,.jpg"/>
<div id="idcardImagePositiveContent"></div>
</div>
构建js对象并且初始化：
$('#idcardImageNegativeUpload').fileupload({
dataType: 'json',
done: function (e, data) {
console.log(data);
if (data.result.status != "200") {
alert("图片大小不能超过2M...");
} else {
$.each(data.result.data, function (index, file) {
$("#idcardImageNegativeContent").html("<a href='" + file.url + "' target='_blank'><img src='" + file.url + "' width='120'></img></a>");
$("#idcardImageNegative").attr("value", file.urlDB);
});
}
},
change: function (e, data) {
var size = data.files[0].size;
if((size / 1024 / 1024) > 2) {
alert("图片大小不能超过2M...");
return false;
}
}
});
后台controller以及service处理，需要调用fastdfs客户端上传
@RequestMapping(value="/upload", method = RequestMethod.POST) @ResponseBody public LeeJSONResult upload(MultipartHttpServletRequest request, HttpServletResponse response) throws Exception { List<PictureResult> picList = new ArrayList<PictureResult>(); Iterator<String> itr = request.getFileNames(); MultipartFile mpf = null; while (itr.hasNext()) { mpf = request.getFile(itr.next()); PictureResult pic = pictureService.uploadPic(mpf); picList.add(pic); } return LeeJSONResult.ok(picList); }
@Override public PictureResult uploadPic(MultipartFile picFile) { PictureResult result = new PictureResult(); // 判断图片是否为空 if (picFile.isEmpty()) { result.setError(YesOrNo.YES.value); result.setMessage("图片为空"); return result; } // 上传到图片服务器 try { // 取图片扩展名 String originalFilename = picFile.getOriginalFilename(); // 取扩展名不要“.” String extName = originalFilename.substring(originalFilename.lastIndexOf(".") + 1); FastDFSClient client = new FastDFSClient("classpath:resource/client.conf"); String url = client.uploadFile(picFile.getBytes(), extName); // 把url响应给客户端 result.setError(YesOrNo.NO.value); result.setUrlDB(url); result.setUrl(IMAGE_SERVER_BASE_URL + url); } catch (Exception e) { e.printStackTrace(); result.setError(YesOrNo.YES.value); result.setMessage("图片上传失败"); } return result; }
上传的效果如此，最后通过上传后的路径，直接使用form序列化再提交保存到数据库中即可
最近实在很忙，时间很碎片化，一方面公司的产品急着做，另一方面又在做自己的产品以及一套开源权限，同时又在着手准备开公司的事情，所以在文章更新的频率上放缓了脚步，希望大家谅解，等事情告一段落后给大家每人发个红包（限公众号粉丝）哈~！
