springmvc异步上传图片并回调页面函数插入图片url代码示例
<tr>
<td class="search_td">属性值图片值：</td>
<td>
<input type="text" id="valuePic" name="valuePic"/>
<a href="javascript: void(0);" onclick="openUploadImageDialog(); return false;">上传</a>
(logo标准大小：<font color="red">宽:95px,高:28px</font>)
</td>
</tr>
弹出框：
<div class="commondialog" style="display: none;"></div>
<div class="commonImagedialogDiv" style="display: none;">
<iframe src="" style="display: none" id="uploadPic" name="uploadPic"></iframe>
<form action="/uploadPic" enctype="multipart/form-data" target="uploadPic" method="post">
<table cellpadding="3">
<tbody>
<tr>
<td>
<input type="file" name="uploadPic" size="20" id="uploadfile">
</td>
</tr>
<tr>
<td>
<input type="submit" id="upsubmit" value="上传" class="btn">
</td>
</tr>
</tbody>
</table>
</form>
</div>
//执行图片函数
function selectImage(isSuccess, imgUrl, content) {
if (isSuccess == "1") {
if (contentImageDialog) {
$('#valuePic').val(imgUrl);
$('#imagePath').attr('src', imgUrl);
contentImageDialog.hide();
}
} else {
if (contentImageDialog) {
alert(content);
contentImageDialog.hide();
}
}
}
var contentImageDialog = null;
function openUploadImageDialog() {
//console.log( contentImageDialog );
if (contentImageDialog) {
$(contentImageDialog.element).find('.l-dialog-content').html(
'<div class="commondialog"></div>');
}
$('.commondialog').html($('.commonImagedialogDiv').html());
contentImageDialog = $.ligerDialog.open({
target : $('.commondialog'),
title : '上传图片',
height : 150,
width : 300
});
}
spring 配置：
<!-- 上传附件 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8" />
<!-- 上传最大限制 20M-->
<property name="maxUploadSize" value="20971520" />
<property name="maxInMemorySize" value="40960" />
<!-- resolveLazily属性启用是为了推迟文件解析，以便在UploadAction 中捕获文件大小异常-->
<property name="resolveLazily" value="true"/>
</bean>
后台处理：
@RequestMapping(value = "/uploadPic", method = RequestMethod.POST)
public void upPic(@RequestParam(value = "uploadPic", required = false) MultipartFile picFile,
HttpServletResponse response) throws Exception {
if (picFile == null) {
this.outPutString(request, response, "<script>parent.jQuery.jBox.closeTip();alert('请选择上传图片');</script>");
return;
}
try {
String filename = picFile.getOriginalFilename();
// 文件后缀名
String ext = FilenameUtils.getExtension(filename).toLowerCase(
Locale.ENGLISH);
if (BaseWebErrors.printPicTypeError(response, ext)) {
this.outPutString(request, response, "<script>parent.jQuery.jBox.closeTip();alert('请上传jpg,jpeg,gif,png,bmp格式图片');</script>");
return;
}
Date now = new Date();
String uniquePicName = DateUtils.getMonth(now) + "/" + UserUtils.getUUID() + "." + ext;
//文件名可能改变必须用返回的值 DateUtils.getMonth(date)-月份
ImageTemp imageTemp = ossFileService.uploadPic(picFile, uniquePicName);
if (imageTemp != null) {
//插入临时图片表
imageTemp.setCreateTime(now);
imageTemp.setImgName(uniquePicName);
int count = imageTempService.insertSelective(imageTemp);
if (count == 0) {
logger.error("图片信息插入数据库失败");
this.outPutString(request, response, "<script>parent.jQuery.jBox.closeTip();alert('图片保存失败,请重新上传');</script>");
return;
}
//上传成功
response.getWriter().write("<script>parent.selectImage('" + 1 + "', '" + imageTemp.getImgUrl() + "', '上传成功')</script>");
} else {
//上传失败
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<script>parent.selectImage('" + 0 + "', '" + uniquePicName + "', '您上传的不是真正的图片,请重新上传!')</script>");
}
} catch (Exception e) {
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<script>parent.selectImage('" + 0 + "', '"
+ "" + "', '您上传的图片失败!')</script>");
logger.error("IOException:", e);
}
}
