input 选取文件夹及多个文件识别内部文件

最新推荐文章于 2025-07-10 16:26:23 发布

原创最新推荐文章于 2025-07-10 16:26:23 发布 · 8.2k 阅读

3 ·

CC 4.0 BY-SA版权

input 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用input元素选取文件夹及其内部文件，详细讨论了change事件以及fileList对象。虽然e.target.files中以数组形式存储，但无法直接体现目录结构。通过webkitRelativePath属性，可以获取内部文件的相对路径，实现对文件夹结构的识别。

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

input 选取文件夹

input 文件的选取

    <input type="file" class="upfile" multiple="multiple"  /> 可以选取多个文件
    <input type="file" class="upfile" webkitdirectory /> 可以选择一个文件夹

拾取内部文件
change 事件

 $fileInput.off().one('change', function (e) {
            var  files=e.target.files;
            [].forEach.call(files,function (item){
                if(item) {
                   uploading(item); //上传文件夹
                }
            },false/true);
            this.value='';
        });
        $fileInput.click();

内部 fileList
在 e.target.files 中但其中列表数组形式，并不能识别目录结构
强大的webkitRelativePath

内部文件的路径


 function uploading(file){
      if(/^\..*/.test(file.name))return // 隐藏文件 取消
        var arrpaths= file.webkitRelativePath.split('/');
        arrpaths.pop(file.webkitRelativePath);    
}