怎么在Java Web项目中利用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; }看完上述内容，你们掌握怎么在Java Web项目中利用Html5 FormData实现一个文件上传功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网行业资讯频道，感谢各位的阅读！
