webkitdirectory 实现文件夹上传（包含文件夹大小和文件个数的校验）

由于工作中业务需要在界面提供用户上传文件夹的功能，平时上传文件做的还多一些，包括对上传文件也有许多插件提供了良好的支持，比如fileinput.js,还有webupload.js。。。，但对上传文件夹的支持就没有，h5里提供了webkitdirectory  来实现上传文件夹的功能，但它仅支持Chrome。话不多说，上代码

HTML代码：

<form class="form-horizontal" role="form" id="fileUploadForm" action="/sys/uploadFolder" name="fileUploadForm" method="post" enctype="multipart/form-data">  <div class="form-group">    <input id="fileFolder" name="fileFolder" type="file" webkitdirectory><span id="msg" style="color:#F00"></span>  </div>  <button type="button" class="btn btn-primary" id="subButton" onclick="commit()">Submit</button></form>

js代码：

//页面提示信息varmsg;//文件数量限制var filesCount=2000;//文件夹大小限制 2000Mvar filesSize=2147483648;//实际的文件数量var actual_filesCount=0;//实际的文件夹大小var actual_filesSize=0;function commit(){//判断是否选中文件夹var file=$("#fileFolder").val();if(file==''){$("#msg").text('请选择要上传的文件夹');return;}     $("#fileUploadForm").submit();}document.getElementById('fileFolder').onchange = function(e) {//判断是否选中文件  var file=$("#fileFolder").val();  if(file!=''){  $("#msg").text('');  }   var files = e.target.files; // FileList   //文件数量   actual_filesCount = files.length;   if(actual_filesCount > filesCount){  $("#msg").text("文件过多，单次最多可上传"+filesCount+"个文件");  return;   }   for (var i = 0, f; f = files[i]; ++i){   actual_filesSize += f.size;   if(actual_filesSize > filesSize){  $("#msg").text("单次文件夹上传不能超过"+filesSize/1024/1024+"M");  return;   }   } };

java代码：

import java.util.List;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.multipart.MultipartHttpServletRequest;    /* * 文件管理 * 上传文件夹 *  * */@RestControllerpublic class SysFilesUploadController {@Autowiredprivate SysFilesUploadService sysFilesUploadService;@RequestMapping(value="/sys/uploadFolder",method=RequestMethod.POST)@ResponseBodypublic String uploadFileFolder(HttpServletRequest request) {        MultipartHttpServletRequest params=((MultipartHttpServletRequest) request);         List<MultipartFile> files = params.getFiles("fileFolder");        String result = sysFilesUploadService.upload(files);        return  result ;         }}
import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.util.List;import org.springframework.beans.factory.annotation.Value;import org.springframework.stereotype.Service;import org.springframework.web.multipart.MultipartFile;@Service("sysFilesUploadService")public class SysFilesUploadServiceImpl implements SysFilesUploadService {private String Storage_PATH = "E\:\\upload\";public String upload(List<MultipartFile> files) { BufferedOutputStream bos =null;        BufferedInputStream bis=null;        try {//遍历文件夹        for (MultipartFile mf : files) {if(!mf.isEmpty()) {String originalFilename = mf.getOriginalFilename();//格式限制，非wav格式的不上传if(!"wav".equals(originalFilename.substring(originalFilename.lastIndexOf(".")+1))) {continue;}String fileName=originalFilename.substring(originalFilename.lastIndexOf("/")+1);//为避免文件同名覆盖，给文件名加上时间戳int index = fileName.lastIndexOf(".");String firstName=fileName.substring(0, index);String lastName=fileName.substring(index);fileName=firstName+"_"+System.currentTimeMillis()+lastName;//读取文件bis=new BufferedInputStream (mf.getInputStream());//指定存储的路径bos=new BufferedOutputStream(new FileOutputStream(Storage_PATH+fileName));int len=0;byte[] buffer=new byte[10240];            while((len=bis.read(buffer))!=-1){                bos.write(buffer, 0, len);            }            //刷新此缓冲的输出流，保证数据全部都能写出            bos.flush();}}        bis.close();        bos.close();        return "ok";} catch (FileNotFoundException e) {              e.printStackTrace();              return "error";          } catch (IOException e) {              e.printStackTrace();              return "error";              }}}