之前整理过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进行异步图片上传返回图片路径,并限制格式和大小的更多相关文章

  1. 在线HTML文档编辑器使用入门之图片上传与图片管理的实现

    在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...

  2. 通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  3. (转)通过Ajax使用FormData对象无刷新上传文件

    写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比 ...

  4. easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)

    需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...

  5. js 图片上传给后台的3种格式

    1. file格式 (创建formData来完成file上传) 我们的接口需求: 代码: <input type="file" id="imgfile" ...

  6. 图片上传-本地图片转base64+ie8支持+本地预览支持

    最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...

  7. 推荐ajaxfilemanager for tiny_mce 比较完善的tiny_mce编辑器的图片上传及图片管理插件PHP版 支持中文

    tiny_mce编辑器,我觉得挺简洁.好用的,但就是图片上传的插件是收费的,而且网上找了半天也没有找到开源好用的上传插件. 不过功夫不负有心人,终于还就被我找到一款相当满意的插件. 这个插件的名字叫a ...

  8. IOS 图片上传处理 图片压缩 图片处理

    - (void)initActionSheet { UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil dele ...

  9. 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题

    这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...

随机推荐

  1. go语言从零学起(三) -- chat实现的思考

    要通过go实现一个应用场景: 1 建立一个websocket服务 2 维护在线用户的链接 3 推送消息和接受用户的操作 列出需求,很显然的想到了chat模型.于是研究了revel框架提供的sample ...

  2. SQL优化:

    今日给人查找数据,时间关系,写个比较粗暴的SQL语句:   #2s587ms#直接将所有表关联,比较粗暴 select go.businessId,dd.dict_namefrom fn_xte.gt ...

  3. Linux下查看系统版本和make版本

    一.查看Linux内核版本命令(两种方法): 1.cat /proc/versionz [root@localhost ~]# cat /proc/versionLinux version 2.6.1 ...

  4. bzoj千题计划170:bzoj1968: [Ahoi2005]COMMON 约数研究

    http://www.lydsy.com/JudgeOnline/problem.php?id=1968 换个角度 一个数可以成为几个数的约数 #include<cstdio> #incl ...

  5. 洛谷 p2066 机器分配(资源型)

    机器分配 https://www.luogu.org/problem/show?pid=2066 题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定 ...

  6. nodejs出现events.js:72中抛出错误 Error: listen EADDRINUSE

    <pre>events.js:72 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE at errnoExce ...

  7. [转]extern与头文件(*.h)的区别和联系

    用#include可以包含其他头文件中变量.函数的声明,为什么还要extern关键字? 如果我想引用一个全局变量或函数a,我只要直接在源文件中包含#include<xxx.h> (xxx. ...

  8. LintCode 407: Plus One

    LintCode 407: Plus One 题目描述 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照位权大小进行排列,位权最大的数在列表的最前面. 样例 给定 ...

  9. TCP/IP 网络编程的理解

    一.网络各个协议:TCP/IP.SOCKET.HTTP等 网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 其中物理层.数据链路层和网络层通常被称作媒体层,是网络工程 ...

  10. Vue的生命周期的介绍

    [推荐链接] https://segmentfault.com/a/1190000008010666