webkitdirectory 實現資料夾上傳(包含資料夾大小和檔案個數的校驗)
阿新 • • 發佈:2019-02-01
由於工作中業務需要在介面提供使用者上傳資料夾的功能,平時上傳檔案做的還多一些,包括對上傳檔案也有許多外掛提供了良好的支援,比如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; } } };
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; /* * 檔案管理 * 上傳資料夾 * * */ @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"; } } }