多文件上传

前端页面效果图(前端显示是借助Bootstrap框架进行显示,使用的是metronic显示模板):

用兴趣的话可以看一下：http://keenthemes.com/preview/metronic/

html代码：

<!--这段代码的重点是要实现多文件上传 在input标签中 type的值设置为file 同时在标签中必须添加 multiple属性(这个属性是用来标识可以选择多个文件进行上传)-->
  
    <div class="row">
       <div class="form-group col-md-12" id="file">
          <input type="hidden" name="_csrf-application" value="<?= $csrf ?>">
          <div class="form-group field-uploadform-excelfiles" style="margin-left: 30px;">
             <label class="control-label btn btn-primary" for="uploadform-excelfiles">选择文件</label>
             <input type="file" id="uploadform-excelfiles" name="files" multiple class="attachment-upload" accept="application/png,application/jpg" style="display: none">
             <div class="help-block"></div>
             <div id="fileName"></div>
           </div>
       </div>
    </div>

前端js代码(使用的jQuery API)：

<!--这里限制了文件上传的格式,但没用去限制文件大小-->
<script type="text/javascript">
  $(function(){
     $("#uploadform-excelfiles").on('change', function (e) {
            var fileError = 0;
            fileList = e.currentTarget.files;
            $.each(fileList, function (index, item) {
                var fileName = item.name;
                var fileEnd = fileName.substring(fileName.indexOf("."));
                //上传文件格式判断
                if (fileEnd == ".png" || fileEnd == ".jpg") {
                    allFile.push(item);
                    $('#files').append( '<tr style="padding-top: 7px;">' +
                        '<td>'+fileName+'</td>' +
                        '<td>'+(item.size / 1024).toFixed(2)+'K</td>' +
                        '<td><input type="button" class="btn btn-danger delete" value="删除"></td>' +
                        '</tr>');
                    //追加文件
                    formData.append('truckImgFiles',item);
                } else {
                    fileError++;
                }
            });
            if (fileError > 0) {
                $.alModal("只能上传 “png或者jpg” 格式的文件!", function () {});
                document.getElementById("upload-form").reset();
                return;
            }

            var fileCount = $('#files').find('tr').length;

        });
   });
   $('#files').on('click','.delete',function (e) {
            var saveFile = [];
            var deleteName = e.target.parentNode.previousElementSibling.previousElementSibling.textContent;
            var deleteIndex;
            //将不删除的放入数组中
            $.each(allFile,function (index, item) {
                if(item.name == deleteName){
                    deleteIndex = index;
                }else {
                    saveFile.push(item);
                }
            });
            allFile.splice(deleteIndex,1);
            formData.delete('files');
            //将不删除的数组追加的formData中
            $.each(saveFile,function (index, item) {
                formData.append('insuranceFiles',item);
            });

            e.target.parentNode.parentNode.remove();
            var fileCount = $('#files').find('tr').length;

        });
</script>

后台代码(SpringMVC):

<!--在spring配置文件中添加CommonsMultipartResolver对象-->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="defaultEncoding" value="utf-8" />
  <!-- <property name="resolveLazily" value="true"/> -->
  <!-- <property name="maxUploadSize" value="10485760" /> -->
  <!--<property name="maxUploadSize" value="524288000" /> -->
</bean>

/**
*循环上传文件数组用的是Java8的stream流结合lambda表达式（如何不熟悉这种方式可忽略只关注主要逻辑就行）
*
*/
        @RequestMapping("/insurance/update")
	@Transactional(rollbackFor = Exception.class)
	public void insuranceUpdate(@RequestParam(name = "files",required = false) CommonsMultipartFile[] insuranceFiles)
	{
		SimpleDateFormat spf = new SimpleDateFormat("yyyy-MM-dd");
		try {
			//生成批次号
			String uuidAll = UUID.randomUUID().toString();
			String uuid =  uuidAll.replaceAll("-", "");
			//更新文件表
			String logoPathDir = ConfigUtil.getConfig("app.file.upload.path")+ "/"+uuid;
			if (insuranceFiles != null)
			Arrays.stream(insuranceFiles).filter((CommonsMultipartFile m) ->{
				//过滤掉获取不到文件名称的CommonsMultipartFile对象
                                if (m.getOriginalFilename() == null || m.getOriginalFilename().equals(""))
					return false;
				else
					return true;
			}).forEach((CommonsMultipartFile multipartFile) ->{
				String fileName = multipartFile.getOriginalFilename();
				File headFile = new File(logoPathDir);
				//设置权限
				headFile.setWritable(true, false);
				//不存在目录时进行创建
				if(!headFile.exists()) headFile.mkdirs();
				InputStream is = null;
				FileOutputStream fos = null;
				try {
					is = multipartFile.getInputStream();
					fos = new FileOutputStream(new File(logoPathDir,fileName));
					int len = -1;
					byte[] buff = new byte[4096];
					while ((len = is.read(buff)) > -1){
						fos.write(buff,0,len);}
				} catch (IOException e) {
					e.printStackTrace();
					res.setError(e);
				}
			});

		} catch (Exception e) {
			e.printStackTrace();
		}
	}