springmvc图片上传(兼容ie8以上,实时预览)
html代码:
<form id="uploadform" method="post" enctype="multipart/form-data">
<table>
<tr>
<td><span class="need"> </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以上,实时预览)的更多相关文章
- Thinkphp5+plupload图片上传功能,支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
- jQuery图片上传前先在本地预览(不经过后端处理)
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
- jQuery图片上传前先在本地预览
js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...
- java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载
java压缩包上传,解压,预览(利用editor.md和Jstree实现)和下载 实现功能:zip文件上传,后台自动解压,Jstree树目录(遍历文件),editor.md预览 采用Spring+Sp ...
- .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode 1.导入所需要的包:n ...
- SpringMVC 图片上传,检查图片大小
使用SpringMVC+Spring 前端提交图片文件到Controller,检查上传图片大小是否符合要求 直接上代码了 1.校验图片大小 这里提供出验证的方法,用于在需要校验的地方调用 /** * ...
- springmvc图片上传、json
springmvc的图片上传 1.导入相应的pom依赖 <dependency> <groupId>commons-fileupload</groupId> < ...
- C# asp:FileUpload上传文件使用JS实现预览效果
js代码: <script type="text/javascript"> //下面用于图片上传预览功能 function setImagePreview() { va ...
- SpringMVC图片上传与显示
@RestController @Scope("prototype") @RequestMapping("/xxxx/xxx/main") public cla ...
随机推荐
- sqlite ef6
参考文章: http://www.cnblogs.com/adswads/p/3808549.html 用NUGET 引用 System.Data.SQLite.EF6 app.config 会有默 ...
- 用call和ret实现子程序
ret和call是另外两种转移指令,它们与jmp的主要区别是,它们还包含入栈和出栈的操作.具体的原理如下: ret操作相当于:pop ip(直接将栈顶元素赋值给ip寄存器) call s的操作相当于: ...
- oracle之 RA-00054: resource busy and acquire with NOWAIT specified or timeout expired
1. truncate 表报 ORA-00054 ,标明有事务正在操作该表SQL> truncate table alldm.DM_XQKD_YUJING_D;truncate table al ...
- ETL实践--Spark做数据清洗
ETL实践--Spark做数据清洗 上篇博客,说的是用hive代替kettle的表关联.是为了提高效率. 本文要说的spark就不光是为了效率的问题. 1.用spark的原因 (如果是一个sql能搞定 ...
- CubeMX使用及感受
简介 CubeMX这几年刚流行起来,是一个STM32代码的初始化配置工具,里面封装了硬件层.中间层,以及示例代码. cube使用 该软件的安装需要较高版本jdk支持,固件库安装时需要注意和主程序的版本 ...
- iOS学习——Xcode9上传项目到GitHub
最近通过视频在学习一个完整项目的开发流程和思路,为了更真实地模拟在实际开发中的流程,我们需要将项目的代码以及一些资料进行版本控制和管理,一般比较常用的SVN或者Github进行代码版本控制和项目管理. ...
- Centos环境下搭建Asp.NET Core环境和安装Jexus
.NET Core2.0出来以后,很多公司开始用于实践生产,其中的原因想必大家都明白,最主要的一下几点. 跨平台,能够部署在Linux和Docker容器中 性能优越,测试时Node的20倍左右 ...
- Java与算法之(4) - 数字全排列
全排列是指n个数(或其他字符)所有可能的排列顺序,例如1 2 3三个数字的全排列是 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3 2 1 那么问题来了,任意输入一个大于1的数字n,列 ...
- hackerrank Alex对战Fedor
任意门 为了在漫长得飞行旅途中娱乐,Alex和Fedor发明了如下的一个简单的双人游戏.游戏是: 首先, Alex画一个有权无向图.该图中可能有多重边(多重边的权值可能相同或者不同). 然后,Fedo ...
- April Fools Contest 2017 题解&源码(A,数学 B,数学 C,数学 D,字符串 E,数字逻辑 F,排序,卡时间,G,数学)
A. Numbers Joke time limit per test:2 seconds memory limit per test:64 megabytes input:standard inpu ...