之前整理过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. [case]filesystem problem

    e2fsck -Nov-) fsck.ext4: Superblock invalid, trying backup blocks... fsck.ext4: Bad magic number in ...

  2. getopt_long

    http://blog.csdn.net/lanyan822/article/details/7692013 在程序中难免需要使用命令行选项,可以选择自己解析命令行选项,但是有现成的,何必再造轮子.下 ...

  3. 总结: 《jQuery基础教程》 1-4章

    前言: 因为公司的项目用到了jQuery+Bootstrap,而Bootstrap基于jQuery,突然发现自己只是很久前看过jQuery的视频教程,对jQuery的一些API有一些了解,在使用中还是 ...

  4. 深入浅出CSS(三):隐藏BOSS大盘点之默认属性小总结

    写在前面 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做好充分心理准备后,再进行阅读! 严重警告,本文包含大量文字,且无配图,请做 ...

  5. webpack的基础入门

    webpack的基础入门 这里对于 webpack 的基础入门进行一些总结,可以参考 github 上的 webpack-demo ,链接是 https://github.com/RealAndMe/ ...

  6. 关于File 文件操作

    1.通过Context.getExternalFilesDir()方法可以获取到 SDCard/Android/data/你的应用的包名/files/ 目录,一般放一些长时间保存的数据2.通过Cont ...

  7. [转载]解决flash与js交互、flash跨域交互、flash跨域提交

    http://blog.csdn.net/andyxm/article/details/5219919 我们引用本地flash,实现flash与js双向交互. function thisMovie(m ...

  8. transform动画效果

     transform动画效果 transform :移动,旋转.倾斜.缩放.     transform:translate(0,300px); x代表的是水平的偏移距离,y代表垂直的.      t ...

  9. git 配置 SSH密钥

    1.登录用户 $ git config --global user.name "geekfeier" $ git config --global user.email " ...

  10. yii验证系统学习记录,基于yiicms(一)写的太长了,再写一篇(二)

    项目地址:https://gitee.com/templi/yiicms 感谢七觞酒大神的付出,和免费分享.当然也感谢yii2的开发团队们. 项目已经安全完毕,不知道后台密码,这种背景下,后台无法进去 ...