Java接口上传多个图片

怎么在Java Web项目中利用Html5 FormData实现一个文件上传功能

作者：Leah

怎么在Java Web项目中利用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 
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 
   $("#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;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;
}

看完上述内容，你们掌握怎么在Java Web项目中利用Html5 FormData实现一个文件上传功能的方法了吗？