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

Posted 2020-10-12

一，原理

详细原理请看这篇文章

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="点击上传营业执照" onclick="uploadBtn();">
<input type="file" name="upload" style="display:none;" onchange="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);
}