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. RLP

    ** 原创勿转 ** 这是在看devp2p时看到的,英文原文地址:https://github.com/ethereum/wiki/wiki/RLP RLP:  Recursive Length Pr ...

  2. 微信小程序实现简易留言板

    微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...

  3. Appium Mac 命令行安装

    试过很多方法都失败,打算用命令行方式安装. 准备工作: 从 https://github.com/appium/appium下载appium版本的源码(.tar) 详见github_Appium1.6 ...

  4. 在React中你真的用对了Ajax吗?

    通过AJAX加载初始数据 通过AJAX加载数据是一个很普遍的场景.在React组件中如何通过AJAX请求来加载数据呢?首先,AJAX请求的源URL应该通过props传入:其次,最好在component ...

  5. Adobe Acrobat pro生成PDF模版

    最近做了一个关于动态生成PDF合同的需求  java生成PDF 网络上随便一搜遍有了 不要用手动在代码里面输入合同中的文字这种方式 如这样的方式 http://blog.csdn.net/justin ...

  6. 一天就学会Android开发四大组件

    这个文章主要是讲Android开发的四大组件,本文主要分为 一.Activity详解二.Service详解三.Broadcast Receiver详解四.Content Provider详解外加一个重 ...

  7. Swagger文档转Word 文档

    GitHub 地址:https://github.com/JMCuixy/SwaggerToWord/tree/developer 原创作品,转载请注明出处:http://www.cnblogs.co ...

  8. 51Nod 1003 阶乘后面0的数量(数学,思维题)

    1003 阶乘后面0的数量 基准时间限制:1 秒 空间限制:131072 KB 分值: 5         难度:1级算法题 n的阶乘后面有多少个0? 6的阶乘 = 1*2*3*4*5*6 = 720 ...

  9. hihoCoder 1051 补提交卡(贪心,枚举)

    #1051 : 补提交卡 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho给自己定了一个宏伟的目标:连续100天每天坚持在hihoCoder上提交一个程序.100天过 ...

  10. [FZU1977] Pandora adventure

    来学插头DP了= = GDKOI前觉得不会考数位DP,GDOI前觉得插头DP用不上.. 结果令人伤感>_< 这题并不用增加状态.. 只要在形成环的时候,让形成环的位置在最后一个必走点之后, ...