ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了。
前台页面和js
//form表单
<form id= "uploadForm" enctype="multipart/form-data">
<input type="file" name="uploadfile" id="uploadfile"/>
<input type="button" value="上传" onclick="doUpload()" class="btn btn-success fileinput-button"/>
<input type="hidden" name="pictureCertificate" id="pictureCertificate" value="">
</form>
//js代码
function doUpload() {
/*var formData = new FormData();
formData.append("uploadfile", document.getElementById("uploadfile").files[0]);*/
var formData = document.getElementById("uploadfile").files[0]; // js 获取文件对象
if (typeof (formData) == "undefined" || formData.size <= 0) {
alert("请选择图片!");
return;
} else {
var formData = new FormData();
formData.append("uploadfile", document.getElementById("uploadfile").files[0]);
}
//var formData = new FormData($( "#uploadForm" )[0]);
//alert(formData);
$.ajax({
url: '<%=basePath%>/creditBill/fileUpload.do' ,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
//$("#pictureCertificate").val(returndata);
if(returndata.code == "3") {
alert("上传图片格式不正确!");
} else if (returndata.code == "0") {
alert("上传文件不得大于500k!");
} else if (returndata.code == "404" || returndata.code == "1") {
alert("上传凭证失败!");
} else {
alert("上传凭证成功!");
$("#pictureCertificate").val(returndata.path);
}
},
error: function (returndata) {
alert("上传凭证失败!");
}
});
}
后台代码
/**
* 图片上传
* @param
* @param uploadfile
* @param request
* @return
*/
@RequestMapping("/fileUpload")
@ResponseBody
public UploadResult handleFormUpload(@RequestParam("uploadfile") List<MultipartFile> uploadfile,
HttpServletRequest request) {
UploadResult result = new UploadResult();
//判断上传文件是否存在
if (!uploadfile.isEmpty() && uploadfile.size() > 0) {
//循环输出上传的文件
for (MultipartFile file : uploadfile) {
//获取上传文件的原始名称
String oringinalFilename = file.getOriginalFilename();
//获取源文件名后缀
String prefixName = FilenameUtils.getExtension(oringinalFilename);
int fileSize = 500000;
//图片限制在500k以内
if(file.getSize() > fileSize) {
result.setCode("0");
return result;
} else if(prefixName.equalsIgnoreCase("jpg")
|| prefixName.equalsIgnoreCase("png")
|| prefixName.equalsIgnoreCase("jpeg")
|| prefixName.equalsIgnoreCase("pneg")) {
//设置上传文件的保存地址目录
String dirPath = request.getSession().getServletContext().getRealPath("/fileupload/");
//区分windows和linux的\ 和 /
//String dirPath = "E:"+System.getProperty("file.separator")+"uploadfile" + System.getProperty("file.separator");
//String dirPath = System.getProperty("file.separator") + "usr" + System.getProperty("file.separator") + "local"
// + System.getProperty("file.separator")+"imgbak"+System.getProperty("file.separator");
System.out.println("dirpath==" + dirPath);
File filePath = new File(dirPath);
//如果文件地址不存在 则创建目录
if (!filePath.exists()) {
filePath.mkdirs();
}
//使用时间格式重新命名
String newFilename = VeDate.getNo(4) + "."+prefixName;
System.out.println("/fileupload/" + newFilename);
try {
//使用MultipartFilr接口的方法完成文件上传到指定位置
file.transferTo(new File(dirPath + newFilename));
String filepath = "/fileupload/" + newFilename;
result.setPath(filepath);
} catch (IOException e) {
result.setCode("1");
return result;
}
} else {
System.out.println("上传图片格式不正确");
result.setCode("3");
return result;
}
}
//上传成功
return result;
} else {
result.setCode("404");
return result;
}
}
UploadResult 实体类
/**
* @author
* @version V1.0
* @Description:
* @date 2018/1/23 17:03
*/
public class UploadResult {
/**
* 错误代码
*/
private String code;
/**
* 上传文件路径
*/
private String path;
//……
}
小结
工作总结,都是文件上传,只是情况不同,本来想用前端文件上传的框架,结果半天都不行,就用了Ajax的上传方式,结果还好。
ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小的更多相关文章
- 在线HTML文档编辑器使用入门之图片上传与图片管理的实现
在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...
- 通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- (转)通过Ajax使用FormData对象无刷新上传文件
写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...
- easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)
需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...
- js 图片上传给后台的3种格式
1. file格式 (创建formData来完成file上传) 我们的接口需求: 代码: <input type="file" id="imgfile" ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文
tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫a ...
- IOS 图片上传处理 图片压缩 图片处理
- (void)initActionSheet { UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil dele ...
- 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
随机推荐
- 利用Sentinel实现Redis主从切换
利用Sentinel(哨兵)实现Redis集群的故障自主切换 首先部署redis主从集群,主要安装过程: cd redis make make install 主要看配置文件: master: bin ...
- Python 装饰器(进阶篇)
装饰器是什么呢? 我们先来打一个比方,我写了一个python的插件,提供给用户使用,但是在使用的过程中我添加了一些功能,可是又不希望用户改变调用的方式,那么该怎么办呢? 这个时候就用到了装饰器.装饰器 ...
- (转)Tomcat配置调优与安全总结
tomcat配置调优与安全总结 作为运维,避免不了与tomcat打交道,然而作者发现网络上关于tomcat配置和调优安全的文章非常散,通过参考各位大神的相关技术文档,根据作者对tomcat的运维经验, ...
- bzoj千题计划143:bzoj1935: [Shoi2007]Tree 园丁的烦恼
http://www.lydsy.com/JudgeOnline/problem.php?id=1935 二维偏序问题 排序x,离散化树状数组维护y #include<cstdio> #i ...
- poj 3216 Repairing Company
http://poj.org/problem?id=3216 n个地点,m个任务 每个任务有工作地点,开始时间,持续时间 最少派多少人可以完成所有的任务 传递闭包之后最小路径覆盖 #include&l ...
- Java并发编程原理与实战一:聊聊并发
一.大纲 •你真的了解并发吗 •多线程和并发 •多线程和多进程 •线程一定快吗 •学习并发的四个阶段 •学习目标 •适合人群 •荐书 二.学习并发的四个阶段 •熟练掌握API,能够完成并发编程 • ...
- MySQL在net中Datatime转换
<add name="adDb" connectionString="Persist Security Info=False;database=ad ...
- javascript里你绝对用的上的字符分割函数--原创
// 在数组内字符为未知情况下,合并和分割的解决方案 var data = [['your name', 'myvalue'], ['myr name', 'thivalue']]; function ...
- 知名网站内部资料:WEB页面内容优化管理与性能技巧
回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起, ...
- 关于JavaScript代码的执行效率总结
Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容 ...