Javascript[03天]不使用file类型input触发文件选择

0

[03天]不使用file类型input触发文件选择

文件上传 阅读:73 时间:2022年05月19日

传统文件浏览上传想当年,我们在Web端文件上传:<input type="file">如果想自定义样式:<label for="file">自定义样式</label> &l...

传统文件浏览上传


想当年,我们在Web端文件上传:

<input type="file">


如果想自定义样式:

<label for="file">自定义样式</label>
<input type="file" id="file" style="display: none;">

即使能自定义样式,也必须有一个input:file标签在。


新的API

showOpenFilePicker

只需要在操作dom元素时,调用showOpenFilePicker方法即可。

  <button id="upload">上传文件</button>
  <script>
    document.querySelector('#upload').addEventListener('click', () => {
      window.showOpenFilePicker().then(res => {
        res[0].getFile().then(file => {
          console.log(file)
        })
      })
    })
  </script>

showOpenFilePicker(options)方法返回Promise对象,并同样可以传入参数限定文件类型等浏览条件

options:

  • multiple

  • 布尔值,默认值是 false ,表示只能选择一个文件。

  • excludeAcceptAllOption

  • 布尔值,默认值是 false ,表示是否排除下面 types 中的所有的accept文件类型。

  • types

  • 可选择的文件类型数组,每个数组项也是个对象,支持下面两个参数:

    • description:表示文件或者文件夹的描述,字符串,可选。

    • accept:接受的文件类型,对象,然后对象的键是文件的MIME匹配,值是数组,表示支持的文件后缀。


目前部分浏览器还未实现。不适合用于正式项目

2233.jpg

家族API

showDirectoryPicker() // 可选择目录

55.jpg

showSaveFilePicker() // 下载窗口

function getNewFileHandle() {
  const opts = {
    types: [{
      description: 'Text file',
      accept: {'text/plain': ['.txt']},
    }],
  };
  return window.showSaveFilePicker(opts);}

微信截图_20220519181315.jpg

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^