Java Web使用Html5 FormData實現多文件上傳

前一陣子,迭代一個線上的項目,其中有一個圖片上傳的功能,之前用的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的,希望可以幫到需要幫助的人