记录--input上传文件夹

会自己走的CV码农

已于 2022-03-29 10:30:54 修改

阅读量1.9k

点赞数

分类专栏：记录文章标签： javascript html5

于 2022-03-29 10:28:58 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41611635/article/details/123814719

版权

记录专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用HTML的webkitdirectory属性实现文件夹上传的方法。通过设置<input>标签的webkitdirectory属性，用户可以选择整个文件夹进行上传，而不仅仅是单个文件。这种方式可以方便地将文件夹内的所有文件一起上传到服务器。

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

话不多说直接上代码：
上传文件夹需要使用到webkitdirectory属性，多级目录会自动遍历把文件夹内的文件都集合在e.target.files中

<input type='file' id="inputUploadDir" name="file" webkitdirectory>
// change方法
function selectFolder(e) {
  //文件夹里面所有文件        
  var files = e.target.files;        
  //文件夹名称        
  var relativePath = files[0].webkitRelativePath;        
  var folderName = relativePath.split("/")[0];        
  //文件信息转换成FormData结构遍历上传        
  for (var i = 0; i < files.length; i++) {            
    var formData = new FormData();            
    formData.append('file', files[i])
    }    
  }