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. Html鼠标右键菜单代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 配置不同环境下启用swagger,在生产环境关闭swagger

    前言 Swagger使用起来简单方便,几乎所有的API接口文档都采用swagger了.使用示例:http://www.cnblogs.com/woshimrf/p/swagger.html, 现在开发 ...

  3. MySQL之表操作

    1 创建表 2 查看表结构 3 数据类型 4 表完整性约束 5 修改表 6 复制表 7 删除表  一创建表 语法: create table 表名( 字段名1 类型[(宽度) 约束条件], 字段名2 ...

  4. PE解析器的编写(四)——数据目录表的解析

    在PE结构中最重要的就是区块表和数据目录表,上节已经说明了如何解析区块表,下面就是数据目录表,在数据目录表中一般只关心导入表,导出表和资源这几个部分,但是资源实在是太复杂了,而且在一般的病毒木马中也不 ...

  5. Kylin与CDH兼容性剖析

    1. 概述 Apache Kylin™是一个开源的分布式分析引擎,提供Hadoop之上的SQL查询接口及多维分析(OLAP)能力以支持超大规模数据,最初由eBay Inc. 开发并贡献至开源社区.它能 ...

  6. JavaScript对于switch语句中的case后键入值的带不带引号

    一.用switch选择星期几 这时case为  例:case="星期一" 二.用switch选择单纯的数字 这时case为  例:case='1' 三.用switch选择一个应用了 ...

  7. vue的组件小操作

    项目技术: webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例: 1.数组数据还未获取到,做出预 ...

  8. Django权限管理测试

    测试内容:当我单击登录页面登录的时候页面会弹出当前用户的个人信息 当我点击提交的时候可以看到我当前用户的所有权限: 测试成功,接下来看一下后台的简单代码: class User(models.Mode ...

  9. RAC+ASM 添加控制文件

    环境介绍:11g RAC 使用 ASM 磁盘组,控制文件只有一个,需要进行添加 参照 MOS 文档 How to Multiplex Control File In RAC Database (文档 ...

  10. HDU 3377 Plan

    Problem Description One day, Resty comes to an incredible world to seek Eve -- The origin of life. L ...