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

最新推荐文章于 2025-07-03 11:38:46 发布

hx_wang007

最新推荐文章于 2025-07-03 11:38:46 发布

阅读量2.4w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： java 文章标签： java 文件夹上传 webkitdirectory

本文链接：https://blog.youkuaiyun.com/hx_wang007/article/details/78761484

java 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种利用H5特性实现文件夹上传的方法，并通过示例代码详细展示了前端HTML与JavaScript部分，以及后端Java处理流程。文章涵盖文件数量与大小限制、格式校验及存储逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于工作中业务需要在界面提供用户上传文件夹的功能，平时上传文件做的还多一些，包括对上传文件也有许多插件提供了良好的支持，比如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";          
		    }
	}

}