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);
}
}
springmvc异步上传图片并回调页面函数插入图片url代码示例的更多相关文章
- JSP 页面中插入图片
第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...
- 基于VUE选择上传图片并在页面显示(图片可删除)
demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...
- JQuery ajax调用一直回调error函数
使用jquery的ajax调用,发现一直回调error函数,ajax调用代码如下,后台返回是正确的,为什么会报错呢? var descValue = $('#descEditArea').val() ...
- 关于markdown文件插入图片遇到的小问题和解决办法
今天用md文件时候发现需要插入图片,以前没做过,所以写下来分享下. 1.先在自己的github上建一个仓库,里面新建个img文件夹存放图片,怎么建仓库可以上网找资料,这里就不详细说明了.建好的仓库如下 ...
- NPOI(2.1.3)向excel中插入图片,xls文档图片插入成功,xlsx文档图片插入失败
众所周知,NPOI对xls和xlsx两个版本的excel文档的操作并没有一个统一的支持, 程序若想兼容这两个版本的操作,必须根据excel版本分别去调用HSSF和XSSF这两套操作库, 之前一直不明白 ...
- [模拟回调] demo1模拟用字符串调用js函数 demo2模拟springmvc controller回调页面js函数
demo1. 模拟用字符串调用js 函数 function dataQuery() { var strFun = "testCallBack"; var strParam = &q ...
- Mina、Netty、Twisted一起学(九):异步IO和回调函数
用过JavaScript或者jQuery的同学都知道,JavaScript特别是jQuery中存在大量的回调函数,例如Ajax.jQuery的动画等. $.get(url, function() { ...
- js中的回调函数 和promise解决异步操作中的回调地狱问题。
回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...
- springmvc+ajax异步上传图片
1.javaweb传统的上传图片方式就是通过form表单提交 <form action="#" method="post" enctype="m ...
随机推荐
- python中常见的错误类型
Python异常类 Python是面向对象语言,所以程序抛出的异常也是类.常见的Python异常有以下几个 ,大家只要大致扫一眼,有个映像,等到编程的时候,相信大家肯定会不只一次跟他们照面(除非你不用 ...
- 20165305 苏振龙《Java程序设计》第五周学习总结
第七章 Java支持在一个类中声明另一个类,这样的类称作内部类,而包含内部类的类成为内部类的外嵌类. 和某类有关的匿名类就是该类的一个子类,该子类没有明显的用类声明来定义,所以称做匿名类. 和某接口有 ...
- flask模板结构组织(局部模板、宏、模板继承)
模板结构组织 除了使用函数.过滤器等工具控制模板的输出外,jinja2还提供了一些工具来在宏观上组织模板内容. 局部模板 在Web程序中,我们通常会为每一类页面编写一个独立的模板.比如主页模板.用户资 ...
- Linux服务器---邮件服务spam
安装spam spam(SpamAssassin)利用perl来进行文字分析,他会检测邮件的标题.内容.送信人,这样就可以过滤出垃圾邮件 1.安装spam.由于spam的依赖太多,用户一定要使用yum ...
- [转载]dbms_lob用法小结
http://blog.sina.com.cn/s/blog_713978a50100prkt.html CLOB里存的是2进制 判定长度 DBMS_LOB.GETLENGTH(col1)获取文本 ...
- [转载]Oracle ltrim() 函数用法
前面有说到过LPAD和RPAD这两个函数用法的文章,今天发现与之相反意义的另外两个函数,那就是LTRIM() RTRIM(). 这次就挑LTRIM() 这一函数来讲讲: 具体的语法格式如下: LTRI ...
- [转载]SQL中EXISTS的用法
比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(SELECT OrderID FR ...
- js关于移入移出延迟提示框效果处理
html部分 <div id="div1">我是导航君</div> <div id="div2" style="disp ...
- sping的quartz设置定时任务
除了spring相关的jar包之外,还需要引入quartz-all-1.8.6.jar 下载地址:http://www.quartz-scheduler.org/downloads/ spring配置 ...
- Percona Server 5.6 安装TokuDB
系统:Red Hat Enterprise Linux Server release 6.3 (Santiago) 数据库:Percona-Server-5.6.29-rel76.2-Linux.x8 ...