webkitdirectory属性 实现文件夹上传

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" οnclick="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;
           }
       }

发布了139 篇原创文章 · 获赞 8 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_37003559/article/details/103970901
今日推荐