<tr>
<td class="search_td">属性值图片值:</td>
<td>
<input type="text" id="valuePic" name="valuePic"/>
<a href="javascript: void(0);" onclick="openUploadImageDialog(); return false;">上传</a>
&nbsp;&nbsp;&nbsp;&nbsp;(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代码示例的更多相关文章

  1. JSP 页面中插入图片

    第一步 在 JSP 页面中插入图片 EL 表达式 ${pageContext.request.contextPath } 的值为当前的项目名称 <html> ... <body> ...

  2. 基于VUE选择上传图片并在页面显示(图片可删除)

    demo例子: 依赖文件 : http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template> ...

  3. JQuery ajax调用一直回调error函数

    使用jquery的ajax调用,发现一直回调error函数,ajax调用代码如下,后台返回是正确的,为什么会报错呢?  var descValue = $('#descEditArea').val() ...

  4. 关于markdown文件插入图片遇到的小问题和解决办法

    今天用md文件时候发现需要插入图片,以前没做过,所以写下来分享下. 1.先在自己的github上建一个仓库,里面新建个img文件夹存放图片,怎么建仓库可以上网找资料,这里就不详细说明了.建好的仓库如下 ...

  5. NPOI(2.1.3)向excel中插入图片,xls文档图片插入成功,xlsx文档图片插入失败

    众所周知,NPOI对xls和xlsx两个版本的excel文档的操作并没有一个统一的支持, 程序若想兼容这两个版本的操作,必须根据excel版本分别去调用HSSF和XSSF这两套操作库, 之前一直不明白 ...

  6. [模拟回调] demo1模拟用字符串调用js函数 demo2模拟springmvc controller回调页面js函数

    demo1. 模拟用字符串调用js 函数 function dataQuery() { var strFun = "testCallBack"; var strParam = &q ...

  7. Mina、Netty、Twisted一起学(九):异步IO和回调函数

    用过JavaScript或者jQuery的同学都知道,JavaScript特别是jQuery中存在大量的回调函数,例如Ajax.jQuery的动画等. $.get(url, function() { ...

  8. js中的回调函数 和promise解决异步操作中的回调地狱问题。

    回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...

  9. springmvc+ajax异步上传图片

    1.javaweb传统的上传图片方式就是通过form表单提交 <form action="#" method="post" enctype="m ...

随机推荐

  1. linux 下 tomcat 运行报错 Broken pipe

    linux 下 tomcat 运行报错 Broken pipe 感谢:http://hi.baidu.com/liupenglover/blog/item/4048c23ff19f1cd67d1e71 ...

  2. GUI常用对象的属性

    %常用对象的属性 %.figure %hf=figure; %get(hf); %改变颜色 set Color %set(hf,'Color','w'); %去掉默认的菜单 Menubar %set( ...

  3. [转载]SQL中EXISTS的用法

    比如在Northwind数据库中有一个查询为SELECT c.CustomerId,CompanyName FROM Customers cWHERE EXISTS(SELECT OrderID FR ...

  4. centos6使用yum安装python3和pip3

    在安装了epel源的情况下,直接yum就可以安装python3.4 #yum install python34 -y# python3 --versionPython 3.4.5 没有自带pip3,需 ...

  5. Java 线程类的一些常用方法

    线程类的一些常用方法: sleep(): 强迫一个线程睡眠N毫秒.  isAlive(): 判断一个线程是否存活.  join(): 等待线程终止.  activeCount(): 程序中活跃的线程数 ...

  6. 算法笔记 #007# Backtracking

    留着备用. 题目描述和代码参考:https://www.geeksforgeeks.org/8-queen-problem/ NQueenProblem(js代码): class NQueenProb ...

  7. Golang并发编程中select简单了解

    select可以监听channel的数据流动select的用法与switch语法非常类似,由select开始的一个新的选择块,每个选择条件由case语句来描述 与switch语句可以选择任何使用相等比 ...

  8. python 爬取历史天气

    python 爬取历史天气 官网:http://lishi.tianqi.com/luozhuangqu/201802.html # encoding:utf-8 import requests fr ...

  9. 【RMAN】使用RMAN的 Compressed Backupsets备份压缩技术 (转载)

    1.Oracle参考文档中关于RMAN备份压缩的描述1)关于如何通过调整RMAN参数启用取消备份压缩功能http://download.oracle.com/docs/cd/B19306_01/bac ...

  10. php7安装redis拓展

    phpredis下载地址https://github.com/phpredis/phpredis   解压并进入源码包 unzip phpredis-develop.zip cd phpredis-d ...