一个完整的springmvc + ajaxfileupload实现图片异步上传的案例

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html

 

一，原理

详细原理请看这篇文章

springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

二，案例讲解

2.1，html页面

<script type="text/javascript" src="${rc.contextPath}/js/ajaxfileupload.js"></script>

<input type="button" class="btn-upload bg-business-license" name="yushow" id="yushow" value="点击上传营业执照" οnclick="uploadBtn();">
<input type="file" name="upload" style="display:none;" οnchange="previewImg(this);" id="upload" accept="image/*"/>

function uploadImg(){
var url = '${rc.contextPath}/wxFfanApply.htm?method=UploadFile';
$.ajaxFileUpload({
url: url,
secureuri:false,
type: 'POST',
fileElementId:"upload",
dataType: 'json',
success: function (data, status) //服务器成功响应处理函数
{
var index = data.indexOf('{');
data= data.substring(index, data.length);
var obj = eval('(' + data + ')');
if ("000" == obj.code) {
$("#fssId").val(obj.fssId);
$("#originalFilename").val(obj.originalFilename);
/* alert(obj.fssId);
alert(obj.originalFilename); */
alert("上传成功");
} else {
alert("保存有问题，请重试");
}

},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
});

}

 

2.2，java代码

public void UploadFile(HttpServletRequest request,
HttpServletResponse response) {
Map<String, Object> result = new HashMap<String, Object>();
String fssId=null;
String originalFilename=null;
try {
MultipartHttpServletRequest multipartRequest = null;

multipartRequest = (MultipartHttpServletRequest) request;

String fileElementId = request.getParameter("fileElementId");
if (StringUtils.isEmpty(fileElementId))
{
fileElementId = "upload";
}
MultipartFile inputFile = multipartRequest.getFile(fileElementId);
originalFilename = inputFile.getOriginalFilename();
fssId = FssFileClient.upload("app-weixin", inputFile);
if(StringUtils.isEmpty(fssId)&&StringUtils.isEmpty(originalFilename)){
result.put("code", "001");
result.put("fssId", "");
result.put("originalFilename", "");
super.toJson(result, response);
return;
}
} catch(Exception e) {
result.put("code", "002");
super.toJson(result, response);
}
result.put("code", "000");
result.put("fssId", fssId);
result.put("originalFilename", originalFilename);
super.toJson(result, response);
}

 

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html