Java Web使用Html5 FormData实现多文件上传功能-eolink官网

Java Web使用Html5 FormData实现多文件上传功能

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

首先html页面定义有两种:

Html1

Html2

项目中我采用了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

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

var imgUrl = imgs[i].imageUrl;

var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length

if ( imglength < 5) {

$("#view_" + fileId).parent().after('

');

$("#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 files) {

response.setContentType("text/html;http://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 map = this.multipleUpload(request, files);

};

protected Map multipleUpload(HttpServletRequest request, List files) throws IllegalStateException, IOException {

Map 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 iter = multiRequest.getFileNames();

List list = new ArrayList<>();

MultiValueMap multiValueMap = multiRequest.getMultiFileMap();

List fileList = multiValueMap.get("file");

for (MultipartFile file:fileList){

//这里上传多张图片

StringBuffer url = new StringBuffer("");

Map 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的,希望可以帮到需要帮助的人

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

var imgUrl = imgs[i].imageUrl;

var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length

if ( imglength < 5) {

$("#view_" + fileId).parent().after('

');

var imgUrl = imgs[i].imageUrl;

var imglength = $("#view_" + fileId).parent().parent().find(".upload-img").length

if ( imglength < 5) {

$("#view_" + fileId).parent().after('

$("#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")

})

java代码部分:

public void multipleCommentImageUpload(HttpServletRequest request, HttpServletResponse response, @RequestParam(value = "file", required = false)List files) {

response.setContentType("text/html;http://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 map = this.multipleUpload(request, files);

};

protected Map multipleUpload(HttpServletRequest request, List files) throws IllegalStateException, IOException {

Map 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 iter = multiRequest.getFileNames();

List list = new ArrayList<>();

MultiValueMap multiValueMap = multiRequest.getMultiFileMap();

List fileList = multiValueMap.get("file");

for (MultipartFile file:fileList){

//这里上传多张图片

StringBuffer url = new StringBuffer("");

Map 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;

}

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

Iterator与LIstIterator接口在java中的区别有哪些

323 2023-04-28

Java Web使用Html5 FormData实现多文件上传功能

java中的接口是类吗

vue项目接口域名动态的获取方法

Iterator与LIstIterator接口在java中的区别有哪些

推荐文章

接口调用是什么意思？几种常用接口调用方式

接口设计原则

8款在线 API 接口文档管理工具

api管理系统是什么？

什么是接口调试？接口调试的步骤有哪些？

api 接口管理系统有哪些？

接口测试有几种测试方法

API文档生成工具有哪些？

微服务和api网关区别

交换机配置步骤

最近发表

热评文章

在线接口文档管理工具推荐，支持在线测试，HTTP接口

开源的在线接口文档wiki工具Mindoc的介绍与使

如何优雅的进行接口设计？接口设计的六大原则是什么？

什么是API测试,api检测公司

软件接口设计怎么做？前后端分离软件接口设计思路

接口管理平台推荐，几大接口管理平台总有一款适合你！