关于你不知道的前端文件上传方式

屈小康

于 2024-01-15 11:27:53 发布

阅读量806

点赞数 14

分类专栏： js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45557681/article/details/135594996

版权

js 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

1、原生方法

我们开发中比较常用的有使用 input 属性的 type 设置为 file,这里我们就不进行过多的阐述，已经老生常谈了。
今天我们主要介绍两个新的属性 showDirectoryPicker 和 showOpenFilePicker

这里是官方文档

1、showDirectoryPicker

showDirectoryPicker方法主要是获取文件目录下面的子文件，作用就是显示一个目录选择器，我们可以通过上传目录，去过去我们想要的某个文件，或者判断该文件是否存在于该目录之中。

主要用法：

<body>
    <div class="btn"></div>
    <div class="result"></div>
</body>
<script>
    let btn = document.querySelector('.btn');
    btn.addEventListener('click', () => {
        showDirectoryPicker().then(async (file) => {
            const recursion = async (file) => {
                if (file.entries) {
                    const files = file.entries();
                    for await (let item of files){
                        item.forEach(i=>{
                            if(typeof i == 'string'){
                                const div = document.createElement('div');
                                div.innerHTML = i;
                                document.querySelector('.resyult').appendChild(div)
                            }else{
                                recursion();
                            }
                        })
                    }
                }
            }
            recursion();
        })
    })
</script>

展示内容：文件目录下的文件
在这里插入图片描述

2、showOpenFilePicker

showOpenFilePicker方法你可以理解为 input 的 type 为 file，showOpenFilePicker这个API 返回用户所选的文件不是目录默认。

      btn.addEventListener("click", () => {
        showOpenFilePicker().then(async (file) => {
          console.log(await file[0].getFile());
          const file = await file[0].getFile();
        });
      });

这个和我们正常操作一样。

屈小康

关注

14
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
关于你不知道的前端文件上传方式

showDirectoryPicker方法主要是获取文件目录下面的子文件，作用就是显示一个目录选择器，我们可以通过上传目录，去过去我们想要的某个文件，或者判断该文件是否存在于该目录之中。showOpenFilePicker方法你可以理解为 input 的 type 为 file，showOpenFilePicker这个API 返回用户所选的文件不是目录默认。,这里我们就不进行过多的阐述，已经老生常谈了。今天我们主要介绍两个新的属性。展示内容：文件目录下的文件。这个和我们正常操作一样。
复制链接

扫一扫