由於工作中業務需要在介面提供使用者上傳資料夾的功能，平時上傳檔案做的還多一些，包括對上傳檔案也有許多外掛提供了良好的支援，比如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程式碼：

//頁面提示資訊
var	msg;
//檔案數量限制
var filesCount=2000;
//資料夾大小限制 2000M
var 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;
 		  }
 	  }
 	};


 

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;  
  
/*
 * 檔案管理
 * 上傳資料夾
 * 
 * */
@RestController
public class SysFilesUploadController {
	
	@Autowired
	private SysFilesUploadService sysFilesUploadService;
	
	@RequestMapping(value="/sys/uploadFolder",method=RequestMethod.POST)
	@ResponseBody
	public 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";          
		    }
	}

}