JavaScript 两种方案打开文件对话框

这篇具有很好参考价值的文章主要介绍了JavaScript 两种方案打开文件对话框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 两种方案打开文件对话框

JavaScript 两种方案打开文件对话框


一、文件对话框

在编写项目时,难免会遇到想要用户上传文件的场景。文件流处理之前的第一关是打开文件对话框让用户选取文件,本文主要讲解如何打开这个文件对话框,同时带来了一种对于文件系统操作的新概念 API。
要明确一点的是文件对话框是浏览器的功能,开发者不能自定义文件对话框,或是直接操作用户目录文件,要做的只是指引用户打开文件对话框选中目录文件。


二、传统方案表单元素🌈

在网上搜索教程,想要打开文件对话框基本上都是使用 <input type='file' /> 方案实现,不用感到奇怪,因为想在大多数浏览器上完全通过 JavaScript 脚本来控制文件对话框,只能通过这个方法。这种传统方案历史最久,最普遍,当然兼容性也是最好的。
通过脚本生成元素 <input type='file' /> 并对其操作,就能显示文件对话框,同时生成的元素支持属性不变,利用 acceptmultiple 属性能控制文件上传类型与多选。

<style>
  .wrap {
    display: flex;
    height: 20vh;
  }

  #open-file {
    width: 100px;
    height: 50px;
    margin: auto;
    border: 1px solid #5B5B5B;
    border-radius: 5px;
    background-color: #FCFCFC;
    cursor: pointer;
  }

  #open-file:hover {
    background-color: #F0F0F0;
  }
</style>
<body>
  <div class="wrap">
    <button id="open-file">选择文件</button>
  </div>
  <script>
    /**
   * 打开文件选取对话框
   * @param fn 选取文件后回调,接收event和filelist参数
   * @param accept 文件类型
   * @param multiple 是否多选
   */
    function openFilePicker({fn, accept, multiple} = {}) {
      const inpEle = document.createElement("input");
      inpEle.id = `__file_${Math.trunc(Math.random() * 100000)}`;
      inpEle.type = "file";
      inpEle.style.display = "none";
      // 文件类型限制
      accept && (inpEle.accept = accept);
      // 多选限制
      multiple && (inpEle.multiple = multiple);
      inpEle.addEventListener("change", event => fn.call(inpEle, event, inpEle.files), {once: true});
      inpEle.click();
    }

    const btn = document.getElementById("open-file");
    btn.addEventListener("click", () => {
      openFilePicker({
        fn: (e, files) => {
          console.group("获取到的文件");
          console.log("files", files);
          console.groupEnd();
        }
      });
    });
  </script>
</body>

JavaScript 两种方案打开文件对话框
优缺点总结:

  • 不可避免,得依靠生成表单元素才能实现,实现起来比较繁琐。
  • 对于更进一步封装,列如使用 Promise 在用户取消选择文件抛出 reject 变的难以检测,如何监听取消行为在 stackoverflow 上貌似也没有什么好的解决办法,不过也不用慌张,大多数情况下只需处理文件获取后的行为。

三、文件系统访问API💦

文件系统访问API是一个很新的概念,允许web应用程序直接读取或保存用户设备上的文件和文件夹的更改,此 API 目前纯粹是一个 JavaScript API,并且不与表单或输入元素集成,这和以往的<input type='file' />不同。
window.showOpenFilePicker 方法能够直接调用文件对话框,一般配合aysnc/await使用,获取到的是一个文件句柄对象数组。
参数:

  • multiple:默认为false,当设置为true是,可以选择多个文件。
  • excludeAcceptAllOption:在打开文件对话框时,右下角分类选项通常存在一个「所有文件」选项,此属性控制该选项是否存在。默认为false,则显示「所有文件」选项。
  • types:允许用户选择的文件类型数组,数组中的每个元素都是一个对象,对应文件对话框右下角分类的一个项。
    • description:可选,表示文件或则文件夹的描述,对应文件对话框分类选项说明,若为指定则浏览器自动生成。
    • accept:接受的文件类型,传入对象,键是MIME类型,值是一个文件扩展名数组。浏览器能识别 MIME 类型的情况下,会将扩展名数组与内置扩展名进行合并。
      「在传统方案 <input type='file' />里也存在一个类型属性 accept,有意思的是只需要填入MIME类型即可,浏览器会自动识别对应的后缀文件,部分未认证或偏僻的MIME类型浏览器是识别不了,猜测是为了解决这个问题将此参数以这种形式编写。需要了解更多MIME类型,可以去查阅这篇文章『 『速查手册』MIME 多用途互联网邮件扩展 』」

下述示例限制只能传图片类型文件,但事实上能支持的类型远远不止所设置的几个。注意:因为兼容性问题,运行下述代码请使用谷歌内核86+版本浏览器。

<style>
  .wrap {
    display: flex;
    height: 20vh;
  }

  #open-file {
    width: 100px;
    height: 50px;
    margin: auto;
    border: 1px solid #5B5B5B;
    border-radius: 5px;
    background-color: #FCFCFC;
    cursor: pointer;
  }

  #open-file:hover {
    background-color: #F0F0F0;
  }
</style>
<body>
  <div class="wrap">
    <button id="open-file">选择文件</button>
  </div>
  <script>
    const btn = document.getElementById("open-file");
    btn.addEventListener("click", async () => {
      // 单元素数组结构
      const [fileHandle] = await window?.showOpenFilePicker({
        types: [
          {
            description: "图片类型",
            accept: {"image/*": ['.png', '.gif', '.jpeg', '.jpg']}
          }
        ]
      });
      // 获取文件File对象
      const file = await fileHandle?.getFile();
      console.group("获取到的文件");
      console.log(fileHandle);
      console.log(file);
      console.groupEnd();
    });
  </script>
</body>

JavaScript 两种方案打开文件对话框
JavaScript 两种方案打开文件对话框

除了此方法外,文件系统访问 API 还存在 showSaveFilePicker、showDirectoryPicker 方法等,有兴趣可以去了解一下。

优缺点总结:

  • 最直观的好处,使用 showOpenFilePicker 能够摆脱传统 <input type='file' />方式,简单便捷,极大程度上方便了 Web 应用的开发。
  • 受浏览器保护策略影响,文件系统访问 API 程序不能自行运行,需要用户对页面内容交互后才能触发。一般来讲对于文件的操作都是由用户交互所触发,哪怕是传统方案 <input type='file' /> 也需用户点击,对此影响并不大。
  • 能够自定义兼容浏览器不能识别的 MIME 类型,指定用户能够选择什么文件,功能性更加强大。
  • 新的概念所带来的必然是兼容性问题,且文件系统访问 API 不是 W3C 标准,大多数浏览器并不能使用,这是普及起来最大的问题,许多开发者甚至没听说过此 API。

JavaScript 两种方案打开文件对话框
JavaScript 两种方案打开文件对话框
JavaScript 两种方案打开文件对话框

注意:文件系统访问 API 它不是 W3C 标准,也不在 W3C 标准轨道上,在can i use上查询可知,在谷歌内核以及少部分的浏览器上支持此 API ,且版本要求苛刻。可以简单通俗的理解为,这可能只是谷歌的工程师为谷歌浏览器专门开发的(开发文档日志),在火狐浏览器控制台上,调用 window.showOpenFilePicker API 时,返回的是未定义。


四、更进一步使用

有句话说的好,小孩才做选择,大人两个都要,那么有没有什么办法可以实现传统方式与文件系统访问API相结合呢?答案是肯定的。
实现原理很简单,只需根据 window 对象下判断是否存在 showOpenFilePicker 方法即可。下述代码引用博主 开源项目 的源码供大家参考。因为是使用 TypeScript 编写,需要转换为 JavaScript 的同学需要使用 Node.js 安装 typescript依赖。

npm i typescript
tsc 文件目录 --target esnext 
/**
 * 打开文件选择对话框
 * 若浏览器不支持实验性方法:window.showOpenFilePicker,则采用input[type=file]元素进行兼容
 * @param {string | string[]} accept 文件类型限制 ,默认全部
 * @param {boolean} multiple 文件多选
 * @param {boolean} webkitdirectory 只选择目录限制
 * @param {number} compatible 兼容模式,默认开启
 * @param {number} cancel 兼容取消控制,为0时候则取消文件时不抛出reject,❗在使用async/await时会造成阻塞
 * @param {string} description 文件或者文件夹的描述,可选
 * @return {Promise<FileList>}
 */
export async function openFileDialog(
  {
    accept = MIME.ALL,
    compatible = true,
    cancel = 300,
    multiple,
    webkitdirectory,
    description
  }: FileDialogConfig = {}
): Promise<File[]> {
  accept.constructor === Array && (accept = accept.join(","));
  // 实验性功能
  if (!compatible && window.hasOwnProperty("showOpenFilePicker")) {
    console.warn("Note that showOpenFilePicker is an experimental interface and is not supported by most browsers, so use it sparingly.");
    const files = [];
    const acceptMap: { [accept: string]: string[] } = {};
    for (let a of (accept as string).split(",")) {
      acceptMap[a] = [];
    }
    //@ts-ignore
    const fileHandleList = await window.showOpenFilePicker?.({
      multiple,
      excludeAcceptAllOption: false,
      types: [{
        description,
        accept: acceptMap
      }]
    });
    for (const f of fileHandleList) {
      files.push(await f.getFile());
    }
    return files;
  }

  const inpEle = document.createElement("input");
  inpEle.id = `__file_${Math.trunc(Math.random() * 100000)}`;
  inpEle.type = "file";
  inpEle.style.display = "none";
  // 文件类型限制
  inpEle.accept = accept as string;
  // 多选限制
  multiple && (inpEle.multiple = multiple);
  // 选择目录限制
  if (webkitdirectory) {
    console.warn("该特性是非标准的,请尽量不要在生产环境中使用它!\n"
                 + "This feature is non-standard, so try not to use it in a production environment!");
    inpEle.webkitdirectory = webkitdirectory;
  }
  inpEle.click();

  return await new Promise((resolve, reject) => {
    let _isSelected = false;
    const changeEvent = () => {
      const files = inpEle.files;
      if (files) {
        _isSelected = true;
        resolve(Array.from(files));
      }
    };
    const focusEvent = (event: Event) => {
      if (event.target?.constructor === Window) {
        setTimeout(() => {
          !_isSelected && reject("未选定文件\nUnselected file");
        }, cancel);
      }
    };
    inpEle.addEventListener("change", changeEvent, {once: true});
    cancel && window.addEventListener("focus", focusEvent, {once: true});
  });
}

六、代码仓库🌐

  • https://github.com/xzcwx/files

七、参考资料💘

🍅因发布平台差异导致阅读体验不同,源文贴出:《JavaScript 两种方案打开文件对话框》文章来源地址https://www.toymoban.com/news/detail-466457.html

  • 官方手册:
    • - HTML(超文本标记语言) | MDN
    • Window.showOpenFilePicker() - Web APIs | MDN
    • 文件系统 API 的基本概念 - Web API 接口参考 | MDN
    • can i use
  • 网络文献:
    • The File System Access API: simplifying access to local files
    • W3C社区文档-文件系统访问(英)

七、推荐博文🍗

  • 『速查手册』MIME 多用途互联网邮件扩展
  • 『精』EditorConfig 小老鼠 跨编辑器 | IDE 保持一致的编码风格

到了这里,关于JavaScript 两种方案打开文件对话框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Javascript中的对话框-详解

    目录 对话框 警告框 确认框 输入框 注释 在 Javascript(后面我就统一叫 JS 这个简称了)主要提供了三种对话框:警告框、确认框、输入框。 警告框 警告框是在 JS 中一般用于调试程序时所使用的,主要的目的是为了输出调试结果。也可以用于显示警告信息。 使用 ale

    2024年01月23日
    浏览(33)
  • MFC 通用对话框之文件对话框

    CFileDialog 类 封装了Windows通用文件对话框,Windows通用文件对话框提供了轻松实现与Windows标准一致的打开文件、保存文件、另存文件对话框的方法。 当我们用CFileDialog类的构造函数生成一个对象后就修改 m_ofn 结构体对象里的值, m_ofn 的类型为 OPENFILENAME。 CFileDialog类构造函数的

    2024年02月05日
    浏览(59)
  • QT中在MainWindow(主窗口)中创建Dialog(对话框)两种方式优缺点对比

    新建窗口工程 利用ui工具在Window中创建三个按钮 打开对话框 关闭对话框 改变三个按钮的名称 openDialog closeDialog 在工程中添加QDialog类,名字是Dialog 在Dialog中创建label控件,写上HelloWorld 最关键的一步,在window的类中创建Dialog私有对象指针 在window.cpp中编写指针myDialog的初始化代

    2024年02月07日
    浏览(45)
  • JavaScript 练手小技巧:HTML5 的 dialog 标签制作对话框

    对话框,在应用中常常用来做 信息提示、特定操作 (如,登录、删除信息等)。 以前创建对话框,需要用 div 标签去模拟,或者使用一些框架、插件,如 artDialog 、 boostrap 等,去创建 对话框 。 如:使用 div 标签去模拟对话框  特定的功能还需要自己编写 JavaScript 代码,详见

    2024年01月20日
    浏览(37)
  • Rust UI开发(三):iced如何打开图片(对话框)并在窗口显示图片?

    注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 这是一个系列博文,本文是第三篇,前两篇的链接: 1、Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符 2、Rust UI开发(二):iced中如何为窗口添加icon图标 本篇是

    2024年02月04日
    浏览(85)
  • Qt 文件对话框使用 Deepin风格

    当你在Deepin或UOS 上开发 Qt 程序时,如果涉及到文件对话框功能,那么就会遇到调用原生窗口的问题。 如果你使用的是官方的Qt版本,那么在Deepin或者UOS系统上,弹出的文件对话框会是如下这样: 而Deepin或UOS系统提供的默认对话框: 可以看到,Qt自身提供的对话框太丑,与系

    2024年02月13日
    浏览(44)
  • qt学习:实战 笔记本 (对话框+文件)

    目录 第一步,配置ui界面  第二步,头文件  第三步,颜色对话框点击事件  第四步,字体对话框点击事件  第五步,输入对话框点击事件  第六步,打开文件对话框点击事件  第七步,另存为对话框点击事件

    2024年01月22日
    浏览(36)
  • qt学习:QT对话框+颜色+文件+字体+输入

    目录 概述 继承图 QColorDialog 颜色对话框 QFileDialog 文件对话框 保存文件对话框 QFontDialog 字体对话框 QInputDialog 输入对话框 对于对话框的功能,在GUI图形界面开发过程,使用是非常多,那么Qt也提供了丰富的对话框类 QDialog是所有对话框的基类 QWidget  QDialog QColorDialog 颜色对话框

    2024年01月21日
    浏览(65)
  • 12.QT文件对话框 文件的弹窗选择-QFileDialog

    目录 前言: 技能: 内容: 1. 界面 2.信号槽  3.其他函数 参考: 前言: 通过按钮实现文件弹窗选择以及关联的操作 效果图就和平时用电脑弹出的选文件对话框一样 技能:  QString filename = QFileDialog::getOpenFileName(this, \\\"弹窗标题\\\",                                          

    2024年02月20日
    浏览(53)
  • 【PyQt小知识 - 8】:QFileDialog — 文件选择对话框(选择文件夹/文件)

    QFileDialog是Qt框架中提供的一个文件选择对话框。它可以让用户通过图形界面的方式选择文件或目录,并提供了许多与文件操作相关的实用功能,例如文件过滤、文件类型限制、文件名默认值、默认目录等。 它具有以下常用的静态方法: getOpenFileName() :选择单个文件打开,返

    2024年02月02日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包