html代码:

<form id="uploadform" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span class="need">&nbsp;&nbsp;&nbsp;</span>新闻图片:</td>
<td width="100" align="right"><input type="file"
onchange="preview(this)" name="newsImages" id="newsImages" /></td>
</tr>
<tr>
<td colspan="2">
<div id="preview"></div>
</td>
</tr>
</table>
</form>

js:

<script type="text/javascript" src="resource/js/jquery-1.9.1.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
function preview(file) {
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function(evt) {
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
uploadPhoto();
}
function uploadPhoto() {
var imagePath = $("#newsImages").val();
if (imagePath == "") {
alert("please upload image file");
return false;
}
var strExtension = imagePath.substr(imagePath.lastIndexOf('.') + 1);
if (strExtension != 'jpg' && strExtension != 'gif'
&& strExtension != 'png' && strExtension != 'bmp') {
alert("please upload file that is a image");
return false;
}
$("#uploadform").ajaxSubmit({
type : 'POST',
url : 'news/upload',
data : {
imgPath : $("#newsImages").val()
},
success : function(data) {
$("input[name='newsImage']").val(data);
},
error : function() {
alert("上传失败,请检查网络后重试");
}
}); }

controller:

@Controller
@RequestMapping(value = "/news")
public class NewsController { /**
* 处理上传的file文件的图片
* @author zhangyn
* @param map
* @param request
* @param newsImages
* @return
*/
@RequestMapping(value = "/upload")
@ResponseBody
public String upload(ModelMap map, HttpServletRequest request,
@RequestParam(value = "newsImages", required = false) MultipartFile newsImages) {
String pic_path = request.getSession().getServletContext().getRealPath("/")+"upload";//保存在项目下的upload文件夹下。
String fileName = newsImages.getOriginalFilename();
Date date=new Date();
long time = date.getTime();
File targetFile = new File(pic_path, time+fileName);//重命名的考虑是按照一定的格式存储利于查找,且避免了相同名称的覆盖。
if (!targetFile.exists()) {
targetFile.mkdirs();
}
try {
newsImages.transferTo(targetFile);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} return "upload/"+time+fileName;
}
}

spring-mvc.xml

    <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760" />
</bean>

springmvc图片上传(兼容ie8以上,实时预览)的更多相关文章

  1. Thinkphp5+plupload图片上传功能,支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  2. jQuery图片上传前先在本地预览(不经过后端处理)

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

  3. jQuery图片上传前先在本地预览

    js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...

  4. java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载

    java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...

  5. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  6. SpringMVC 图片上传,检查图片大小

    使用SpringMVC+Spring 前端提交图片文件到Controller,检查上传图片大小是否符合要求 直接上代码了 1.校验图片大小 这里提供出验证的方法,用于在需要校验的地方调用 /** * ...

  7. springmvc图片上传、json

    springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> < ...

  8. C# asp:FileUpload上传文件使用JS实现预览效果

    js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...

  9. SpringMVC图片上传与显示

    @RestController @Scope("prototype") @RequestMapping("/xxxx/xxx/main") public cla ...

随机推荐

  1. python之dictionary

    1.python3字典 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中 d ...

  2. 《JAVA程序设计与实例》记录与归纳--继承与多态

    继承与多态 概念贴士: 1. 继承,即是在已经存在的类的基础上再进行扩展,从而产生新的类.已经存在的类成为父类.超类和基类,而新产生的类成为子类或派生类. 2. Java继承是使用已存在的类的定义作为 ...

  3. IdentityServer Topics(3)- 定义客户端

    客户端代表可以从您的身份服务器请求令牌的应用程序. 细节有所不同,但您通常为客户端定义以下常用设置: 一个唯一的客户端ID 一个密钥,如果需要 允许与令牌服务的交互(称为授权类型) 身份或访问令牌被发 ...

  4. inline函数不能在for循环中使用的原因

    inline函数的作用继承了宏定义的优点,没有了参数压栈,代码生成等一部分操作,并且摒弃了没有检查编译规则的缺点: 另外要注意,内联函数一般只会用在函数内容非常简单的时候,这是因为,内联函数的代码会在 ...

  5. 七牛php-sdk使用

    使用七牛云存储服务有一年多了,大部分功能基于其PHP-SDK来做开发,现对sdk的一些功能做一个总结. 一.资源上传 上传资源文件到七牛空间的不同实现方法 二.文档转换 介绍如何使用七牛以及七牛第三方 ...

  6. Zedboard(二)使用Vivado+SDK开发嵌入式应用程序——实例一

    本次介绍用Vivado构建Zedboard开发板的硬件平台+SDK开发应用程序(Zedboard裸机开发) 过程如下: 一.运行Vivado,建立新工程 指定好工程路径,下一步,选择RTL Proje ...

  7. 微信小程序--合法域名校验出错

    第一次做小demo的时候遇到一个问题,合法域名校验出错: 第一步:登陆微信公众号平台--个人中心--设置--开发设置--服务器域名(一个月只有5次修改机会一定要珍惜) 第二步 打开微信开发者工具,有个 ...

  8. Fiddler抓取https证书问题

    正常的使用方法  Fiddler 抓包工具总结    大部分问题的解决方案  fiddler4在win7抓取https的配置整理 像我脸一样黑的解决方案  Fiddler https 证书问题     ...

  9. CSS3阴影 box-shadow的使用总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  10. AtCoder Regular Contest 075

    任意门 C - Bugged 题意:类似装箱问题,但是最后体积总和不能为10的倍数. #include<cstdio> #include<cstring> #include&l ...