前一阵子,迭代一个线上的项目,其中有一个图片上传的功能,之前用的ajaxfileupload.js来实现上传的,不过由于ajaxfileupload.js,默认是单文件上传(虽然可以通过修改源码的方法来实现多文件上传),又加上是在移动端做的,所以就打算采用html5的FormData实现多文件上传

首先html页面定义有两种:

Html1

<form enctype="multipart/form-data" id="formfile">
<input type="file" name="file"/>
</>

Html2

<input  type="file" multiple="multiple"  accept="image/gif, image/jpeg, image/png, image/jpg, image/bmp" />

 项目中我采用了Html2的方式

再看看上传的JS部分吧:

  $(document).on("change", ".upload-img input:file", function() {

         var fileId = $(this).attr("id");
var t_files = this.files;
var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length; if (imglength==1) {
if (t_files.length > 5) {
new Message().showMsg("最多选择五张图片");
return false;
} else if (t_files.length < 1) {
new Message().showMsg("至少选择一张图片");
return false;
}
}else if(t_files.length+imglength>6) {
new Message().showMsg('最多再选择'+ (6-parseInt(imglength)) +'张图片');
return false;
}
var data = new FormData();
for (var i=0;i<t_files.length;i++){
data.append('file',t_files[i]);
data.append('randomCode',fileId+i);
data.append('upDir','comment')
}
// for(var pair of data.entries()){
// console.log(pair);
// }
// console.log(JSON.stringify(data));
$.ajax({
url : '${pageContext.request.contextPath}/file/multipleCommentImageUpload', //用于文件上传的服务器端请求地址
type : 'post',
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data:data,
cache: false
}).done(function(data,status){
var dataObj = jQuery.parseJSON(data);
if(dataObj.state == -1){
new Message().showMsg("上传图片出错");
}else{
var imgs = dataObj.imgs;
for (var i=0;i<imgs.length;i++) {
var imgUrl = imgs[i].imageUrl;
var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length
if ( imglength < 5) {
$("#view_" + fileId).parent().after('<div class="upload-img"><img src="' + imgUrl + '" alt="" class="upload_left" rotation-num="0"/></div>');
$("#view_" + fileId).parent().nextAll().find('span').eq(0).text(parseInt($("#view_" + fileId).parent().nextAll().find('span').eq(0).text())+1);
$("#view_" + fileId).parent().nextAll().find('span').eq(1).text(5-parseInt($("#view_" + fileId).parent().nextAll().find('span').eq(0).text()));
}else{
$("#view_" + fileId).attr('src',imgUrl);
$("#view_" + fileId).nextAll().find('input').hide();
$("#view_" + fileId).parent().nextAll().remove('p');
} }
}
}).fail(function (res) {
//console.log("error")
})

上面第19行代表初始化formdata对象,其有两种创建方法,对于使用html2来说使用该方式来创建,使用html1来说可以使用 var data = new FormData(document.getElementById("#formfile");两种创建方式基本没有区别;第22-23行是可以给formdata添加其他属性的,,按需选择,21行是添加文件必须要写的.ajax部分 32 33行是必须要设置的,网上有说明,我就不多说了;

Java代码部分:

   public void multipleCommentImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "file", required = false)List<MultipartFile> files) {
response.setContentType("text/html;charset=utf-8");
UserSession user = WebUtil.getSessionUser(request);
for (MultipartFile file:files) {
String fileName = file.getOriginalFilename(); //获取文件名
}
UploadMessage message = new UploadMessage();
Map map1 = new HashMap(); try {
Map<String,Object> map = this.multipleUpload(request, files);
};
    protected Map<String,Object> multipleUpload(HttpServletRequest request, List<MultipartFile> files) throws IllegalStateException, IOException {

        Map<String,Object> map =new HashMap();
for(MultipartFile file:files) {
if (file == null) {
map.put("status",-1);
map.put("statusInfo","上传参数不能为空");
return map;
}
} //创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
//转换成多部分request
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
Enumeration params = multiRequest.getParameterNames();
String upDir = null;
        //获得formdata对象中自定义的一些属性,是枚举类型
while (params.hasMoreElements()) {
String name = (String)params.nextElement();
upDir = multiRequest.getParameter("upDir");
}
//取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
List<Map> list = new ArrayList<>();
MultiValueMap<String, MultipartFile> multiValueMap = multiRequest.getMultiFileMap();
List<MultipartFile> fileList = multiValueMap.get("file");
for (MultipartFile file:fileList){
//这里上传多张图片
StringBuffer url = new StringBuffer("");
Map<String,String> map1 = new HashMap<>();
if (file != null) {
//取得当前上传文件的文件名称
String originalFilename = file.getOriginalFilename();
//如果名称不为“”,说明该文件存在,否则说明该文件不存在
if (originalFilename != null && originalFilename.trim() != "") {
String suffix = ""; if (originalFilename.indexOf(".") > -1) {
suffix = originalFilename.substring(originalFilename.lastIndexOf("."), originalFilename.length());
} if (notImageFormat(suffix)) {
map.put("statusInfo",imageFomat);
return map;
}
if (isPassSize(file.getSize())) {
map.put("stateInfo",imageSize);
return map;
}
//重命名上传后的文件名
String fileName = idWorker.nextId() + suffix;
String dir = DateTimeUtil.formatDateTime("yy/MM/dd"); if (!StringUtils.isBlank(upDir)){
url.append("/").append( upDir);
}
url.append("/").append(dir).append("/"); //定义上传路径
String path = ParamUtil.imageServiceRealPath + url;
//上传图片
imageUploadService.uploadImage(path, fileName, file.getInputStream());
String allUrl = url + fileName;
map1.put("imagePath",url.toString());
map1.put("imageName",fileName);
map1.put("imageUrl",ParamUtil.imageServicePath + allUrl);
list.add(map1);
}
}
}
map.put("status",0);
map.put("statusInfo","success");
map.put("imgs",list);
}
return map;
}

具体上传的代码就需要自己来实现了,总之就是多文件上传后,也还是需要循环着来传的.

网上有挺多的关于formdata多文件上传的文章,但都写的比较零散,有的只写了前台,有的写得只是后台,有一篇写得比较详细,不过是php的,所以自己就整理了一篇java的,希望可以帮到需要帮助的人

Java Web使用Html5 FormData实现多文件上传的更多相关文章

  1. 【Java Web开发学习】Spring MVC文件上传

    [Java Web开发学习]Spring MVC文件上传 转载:https://www.cnblogs.com/yangchongxing/p/9290489.html 文件上传有两种实现方式,都比较 ...

  2. Java Web 学习(8) —— Spring MVC 之文件上传与下载

    Spring MVC 之文件上传与下载 上传文件 表单: <form action="upload" enctype="multipart/form-data&qu ...

  3. java web 学习笔记 - jsp用的文件上传组件 SmartUpload

    ---恢复内容开始--- 1. SmartUpload 此控件在jsp中被广泛的使用,而FileUpload控件主要是用在框架中 2. 如果想要使用,需要在tomcat的lib目录中,将SmartUp ...

  4. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  5. thinkphp3.2.3使用formdata的多文件上传

    使用formdata的多文件上传  废话少说 直接上代码 1 JS部分 //选择文件后的处理 function handleFileSelect() { var exerciseid=$(" ...

  6. web端、android端的文件上传

    1.web端的文件上传. 这里是利用了第三方的jar包.这里所需要的jar包我已经上传到本博客的资源里了,以下是连接 http://download.csdn.net/detail/caihongsh ...

  7. HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条

    页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...

  8. 从.Net到Java学习第十篇——Spring Boot文件上传和下载

    从.Net到Java学习系列目录 图片上传 Spring Boot中的文件上传就是Spring MVC中的文件上传,将其集成进来了. 在模板目录创建一个新的页面 profile/uploadPage. ...

  9. Spring 4 官方文档学习(十一)Web MVC 框架之multipart(文件上传)支持

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/mvc.html#mvc-multipart 1.简 ...

随机推荐

  1. lua中 table 元表中元方法的重构实现

    转载请标明出处http://www.cnblogs.com/zblade/ lua作为游戏的热更新首选的脚本,其优势不再过多的赘述.今天,我主要写一下如何重写lua中的元方法,通过自己的重写来实现对l ...

  2. RFM模型——构建数据库营销的商业战役!(转)

    RFM模型:R(Recency)表示客户最近一次购买的时间有多远,F(Frequency)表示客户在最近一段时间内购买的次数,M (Monetary)表示客户在最近一段时间内购买的金额.一般原始数据为 ...

  3. Apache许可翻译

    https://www.apache.org/licenses/LICENSE-2.0 Apache许可 2.0 2004.1 使用.复制和发行的术语和条件. 1 定义 "License&q ...

  4. Mapreduce在Yarn调用出错

    共享原因:虽然用一篇博文写问题感觉有点奢侈,但是搜索百度,相关文章太少了,苦苦探寻日志才找到解决方案. 遇到问题:mapreduce程序一直迟迟没有结果. [QC] INFO [main] org.a ...

  5. Ch.3 Aray and String

    3-1 scrore  Here is a string with o and x. The length is between 1 to 80. Calcuate the score. The sc ...

  6. python基础入门教程《python入门经典》

    第一章 在python中使用数字 1.用变量存储信息 1.1变量的类型 变量,用于存储很多不同的数据类型的信息. 基本数据类型 数据类型 存储内容 示例 integer 整   float 浮点   ...

  7. 遇到bug我会怎么做

    我今天遇到一个问题,ztree显示数据,本来这个功能是没有问题的,但是当我新加入了几个页面筛选条件时,将集合传入ztree ,页面缺一直没显示出来,弄了两个小时,代码我都仔细排查了一次,发现没有问题, ...

  8. 你是否也在学习ES6 Promise时遇到过这个问题?

    背景 周末闲来无事,随便翻看了一下阮一峰老师的<ES6 标准入门>第2版,ps:之前在阮一峰老师的官网看过电子版,感觉干货满满,所以就买了纸质版:当看到第16章第4节 'Promise.p ...

  9. Spring+SpringMVC+MyBatis深入学习及搭建(十)——MyBatis逆向工程

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6973266.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(九)--My ...

  10. 美丽的CSS图形和HTML5

    1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...