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用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
随机推荐
- bzoj 3224
3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 16656 Solved: 7255[Submit][St ...
- Java入门:绘制简单图形
在上一节,我们学习了如何使用swing和awt工具创建一个空的窗口,本节学习如何绘制简单图形. 基本绘图介绍 Java中绘制基本图形,可以使用Java类库中的Graphics类,此类位于java.aw ...
- linux网卡的开启
一:文件配置网卡在开机时,自动启用 首先我们使用 ip addr查看IP信息 [root@redhat2 network-scripts]# ip addr : lo: <LOOPBACK,UP ...
- SQL Server 属性不匹配。存在属性(Directory, Archive),包括属性(0),不包括属性(Archive, Compressed, Encrypted)
问题:安装SQL SERVER 2008报错 “存在属性(Directory, Archive),包括属性(0),不包括属性(Archive, Compressed, Encrypted)” 解决办法 ...
- HDU 2841 容斥 或 反演
$n,m <= 1e5$ ,$i<=n$,$j<=m$,求$(i⊥j)$对数 /** @Date : 2017-09-26 23:01:05 * @FileName: HDU 284 ...
- Qt_扫雷游戏实现
源代码下载(详细注释): 详细代码(注释): https://github.com/xiaocangtian/GameMine 链接: http://pan.baidu.com/s/1gf9Ux5h ...
- NGINX配置PHP解析
<?php phpinfo(); ?> location ~ \.php$ { root html; fastcgi_pass ; fastcgi_index index.php; fas ...
- [整理]ASP.NET vNext学习资源
http://www.hanselman.com/blog/IntroducingASPNETVNext.aspx http://blogs.msdn.com/b/dotnet/archive/201 ...
- [hadoop]hadoop api 新版本与旧版本的差别
突然现在对以后的职业方向有些迷茫,不知道去干什么,现在有一些语言基础,相对而言好的一些有Java和C,选来选去不知道该选择哪个方向,爬了好多网页后,觉得自己应该从java开始出发,之前有点心不在焉,不 ...
- 利用Django REST framework快速实现文件上传下载功能
安装包 pip install Pillow 设置 首先在settings.py中定义MEDIA_ROOT与MEDIA_URL.例如: MEDIA_ROOT = os.path.join(BASE_D ...