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

最新推荐文章于 2023-08-14 17:57:49 发布

Cadence_D

最新推荐文章于 2023-08-14 17:57:49 发布

阅读量1.2w

点赞数 2

分类专栏： java基础

java基础专栏收录该内容

167 篇文章 3 订阅

订阅专栏

需要特别说明的是：并不是全部的浏览器都支持按照文件夹进行上传，目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

而在谷歌浏览器下，也不是没有条件的支持，必须在input上加入一个属性：webkitdirectory后才会予以支持。

1、前端使用的JSP：

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
    <script src="../resource/js/jquery/jquery-2.2.3.js" type="text/javascript"></script>
    <script type="text/javascript" src="ajaxfileupload.js"></script>
    
</head>  
<body>  
       <div id="content">文件夹形式上传</br>
<!--         <h1>使用本功能时请使用谷歌浏览器</h1> -->
<!--         <div style="clear:both;content:'';"></div> -->
<!--         <br> -->
<!--         <u><font size="5">按照文件夹进行上传的功能只被个别浏览器支持，如谷歌，Microsoft Edge浏览器</font></u> -->
<!--         <div style="clear:both;content:'';"></div> -->
<!--         <br>         -->
<form  role="form" id="fileUploadForm" action="../upload/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"  id="subButton" οnclick="commit()">Submit</button>  
            </form>  
</body>  
<script type="text/javascript" src="scanUpload.js"></script>
</html>

2、 scanUpload.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();  
//    ajaxfileupload.js 插件提交
//    $.ajaxFileUpload({
//         url:"../upload/uploadFolder",//需要链接到服务器地址   
//          secureuri:false,  
//          fileElementId:"fileFolder",//文件选择框的id属性  ,//文件选择框的id属性  
//          dataType: 'json',   //json 
//          contentType: false,    //不可缺
//          processData: false,    //不可缺
//          success: function (data){
//            if(data!=null){
//              alert(data);
//            }else{
//                alert("上传失败");
//            }                   
//        },
//        error:function(XMLHttpRequest, textStatus, errorThrown){  
//        	console.log(XMLHttpRequest);
//        	console.log(textStatus);
//        	console.log(errorThrown);
//            alert("上传失败，请检查网络后重试");
//       } 
//    });
  
}  
  
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;  
          }  
      }  
    };

3、后端java:

  @RequestMapping(value="uploadFolder",method=RequestMethod.POST)  
	    @ResponseBody  
	    public String uploadFileFolder(HttpServletRequest request) {  
	    String Storage_PATH = request.getSession().getServletContext().getRealPath("blobform/imgs"); //文件存储位置
	      
		    MultipartHttpServletRequest params=((MultipartHttpServletRequest) request);   
	        List<MultipartFile> files = params.getFiles("fileFolder");  
	   
	        BufferedOutputStream bos =null;  
            BufferedInputStream bis=null;  
            try {  
                //遍历文件夹  
                for (MultipartFile mf : files) {  
                    if(!mf.isEmpty()) {     //  byte[] content = mf.getBytes();    //文件内容                                                                               
                         String originalFilename = mf.getOriginalFilename();  
                        //格式限制，非jpg格式的不上传  
                        if(!"jpg".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";            
            }  
	       
	    }

Cadence_D

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
webkitdirectory 实现文件夹上传（包含文件夹大小和文件个数的校验）

需要特别说明的是：并不是全部的浏览器都支持按照文件夹进行上传，目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。而在谷歌浏览器下，也不是没有条件的支持，必须在input上加入一个属性：webkitd
复制链接

扫一扫