Java Web使用Html5 FormData實(shí)現(xiàn)多文件上傳功能
前一陣子,迭代一個(gè)線(xiàn)上的項(xiàng)目,其中有一個(gè)圖片上傳的功能,之前用的ajaxfileupload.js來(lái)實(shí)現(xiàn)上傳的,不過(guò)由于ajaxfileupload.js,默認(rèn)是單文件上傳(雖然可以通過(guò)修改源碼的方法來(lái)實(shí)現(xiàn)多文件上傳),又加上是在移動(dòng)端做的,所以就打算采用html5的FormData實(shí)現(xiàn)多文件上傳
首先html頁(yè)面定義有兩種:
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" />
項(xiàng)目中我采用了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', //用于文件上傳的服務(wù)器端請(qǐng)求地址 type : 'post', processData: false, // 告訴jQuery不要去處理發(fā)送的數(shù)據(jù) contentType: false, // 告訴jQuery不要去設(shè)置Content-Type請(qǐng)求頭 data:data, cache: false }).done(function(data,status){ var dataObj = jQuery.parseJSON(data); if(dataObj.state == -1){ new Message().showMsg("上傳圖片出錯(cuò)"); }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對(duì)象,其有兩種創(chuàng)建方法,對(duì)于使用html2來(lái)說(shuō)使用該方式來(lái)創(chuàng)建,使用html1來(lái)說(shuō)可以使用 var data = new FormData(document.getElementById("#formfile");
兩種創(chuàng)建方式基本沒(méi)有區(qū)別;第22-23行是可以給formdata添加其他屬性的,,按需選擇,21行是添加文件必須要寫(xiě)的.ajax部分 32 33行是必須要設(shè)置的,網(wǎng)上有說(shuō)明,我就不多說(shuō)了;
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","上傳參數(shù)不能為空"); return map; } } //創(chuàng)建一個(gè)通用的多部分解析器 CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext()); //判斷 request 是否有文件上傳,即多部分請(qǐng)求 if (multipartResolver.isMultipart(request)) { //轉(zhuǎn)換成多部分request MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request; Enumeration params = multiRequest.getParameterNames(); String upDir = null; //獲得formdata對(duì)象中自定義的一些屬性,是枚舉類(lèi)型 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) { //取得當(dāng)前上傳文件的文件名稱(chēng) String originalFilename = file.getOriginalFilename(); //如果名稱(chēng)不為“”,說(shuō)明該文件存在,否則說(shuō)明該文件不存在 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; }
具體上傳的代碼就需要自己來(lái)實(shí)現(xiàn)了,總之就是多文件上傳后,也還是需要循環(huán)著來(lái)傳的.
網(wǎng)上有挺多的關(guān)于formdata多文件上傳的文章,但都寫(xiě)的比較零散,有的只寫(xiě)了前臺(tái),有的寫(xiě)得只是后臺(tái),有一篇寫(xiě)得比較詳細(xì),不過(guò)是php的,所以自己就整理了一篇java的,希望可以幫到需要幫助的人
相關(guān)文章
淺談MySQL中是如何實(shí)現(xiàn)事務(wù)提交和回滾的
本文主要介紹了MySQL中是如何實(shí)現(xiàn)事務(wù)提交和回滾的,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02java interface的兩個(gè)經(jīng)典用法
這篇文章主要為大家詳細(xì)介紹了java interface的兩個(gè)經(jīng)典用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09基于Java8實(shí)現(xiàn)提高Excel讀寫(xiě)效率
這篇文章主要介紹了基于Java8實(shí)現(xiàn)提高Excel讀寫(xiě)效率,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11Struts2之Action接收請(qǐng)求參數(shù)和攔截器詳解
這篇文章主要介紹了Struts2之Action接收請(qǐng)求參數(shù)和攔截器詳解,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05java項(xiàng)目實(shí)現(xiàn)猜拳小游戲
這篇文章主要為大家詳細(xì)介紹了java項(xiàng)目實(shí)現(xiàn)猜拳小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05java?for循環(huán)內(nèi)執(zhí)行多線(xiàn)程問(wèn)題
這篇文章主要介紹了java?for循環(huán)內(nèi)執(zhí)行多線(xiàn)程問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Java數(shù)組的定義、初始化、及二維數(shù)組用法分析
這篇文章主要介紹了Java數(shù)組的定義、初始化、及二維數(shù)組用法,結(jié)合具體實(shí)例形式分析了java數(shù)組概念、功能、數(shù)組定義、靜態(tài)數(shù)組、動(dòng)態(tài)數(shù)組、二維數(shù)組等相關(guān)使用技巧,需要的朋友可以參考下2019-01-01Java統(tǒng)計(jì)英文句子中出現(xiàn)次數(shù)最多的單詞并計(jì)算出現(xiàn)次數(shù)的方法
這篇文章主要介紹了Java統(tǒng)計(jì)英文句子中出現(xiàn)次數(shù)最多的單詞并計(jì)算出現(xiàn)次數(shù)的方法,涉及java針對(duì)英文句子的字符串遍歷、轉(zhuǎn)換、正則替換、計(jì)算等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01java.net.MalformedURLException異常的解決方法
下面小編就為大家?guī)?lái)一篇java.net.MalformedURLException異常的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05