文件上传面板中限制需要的文件格式,并且隐藏“所有文件”选项

news2024/11/11 5:32:29

直接说需求:需要实现在文件上传面板中限制需要的文件格式,并且不想展示“所有文件”这个选项,应该怎么做嘞?效果如下图:

这里用到了 window.showOpenFilePicker 方法实现,首先定义接受的格式及限制:

const pickerOpts = {
  types: [
    {
      description: 'Files',
      accept: 
        {
          'application/pdf': ['.pdf'],
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx', '.doc'],
          'application/vnd.ms-excel': ['.xls'],
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
          'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx','.ppt']
        }
    }
  ],
  excludeAcceptAllOption: true,
  multiple: state.allowMultipleUpload
};

这里如果按照下面这种写法来写,会导致出现.ppa和.dot格式的文件格式:

const pickerOpts = {
  types: [
    {
      description: 'Files',
      accept: 
        {
          'application/pdf': ['.pdf'],
          'application/vnd.ms-word': ['.doc'],
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
          'application/vnd.ms-excel': ['.xls'],
          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
          'application/vnd.ms-powerpoint': ['.ppt'],
          'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx']
        }
    }
  ],
  excludeAcceptAllOption: true,
  multiple: state.allowMultipleUpload
};

下面是实现效果的关键代码:

try {
    if (window.showOpenFilePicker) {
      const fileHandles = await window.showOpenFilePicker(pickerOpts);
      const fileDatas = await Promise.all(fileHandles.map(fileHandle => fileHandle.getFile()));
      handleFileInput(fileDatas); // 这里进行后续的上传逻辑
    } else {
      const input = document.createElement('input');
      input.type = 'file';
      input.multiple = true;
      input.accept = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx';
      input.onchange = () => {
        if (input.files) {
          handleFileInput(Array.from(input.files)); // 这里进行后续的上传逻辑
        }
      };
      input.click();
    }
} catch (err) {
    console.log(err);
}

这里为什么是加了if..else,因为Safari浏览器和火狐浏览器不支持 window.showOpenFilePicker,因此需要向下兼容,使用原生的方法,不过这两个浏览器无法去掉“所有文件”这个选项,效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2085443.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 生成随机的国内 ip

示例代码: import randomdef generate_random_cn_ip():# 中国大陆IP范围start_ip "36.54.0.0"end_ip "123.255.255.254"# 将IP地址转换为整数start_ip_num int(start_ip.replace(".", ""))end_ip_num int(end_ip.rep…

【FreeRTOS】信号量实验-控制车辆运行

目录 0 前言1 控制车辆运行2 不使用信号量3 使用计数型信号量3.1 运行两辆车运行3.2 运行三辆车运行 4 使用二进制信号量5 补充信号量知识5.1 两种信号量对比5.2 信号量函数5.3 创建5.4 删除5.5 Take / Give5.5.1 xSemaphoreGive5.5.2 pxHigherPriorityTaskWoken5.5.3 xSemapho…

库存零件耗尽 任天堂宣布停止New 3DS的维修服务

由于库存零件已耗尽,任天堂宣布自8月28日起停止接受New 3DS游戏机的维修服务。在今年3月份时,任天堂就宣布过2DS、New 3DS、New 3DS LL的维修服务将在库存零件耗尽后终止,目前来看2DS和New 3DS LL的维修服务还将继续,直到零件耗尽…

算法中常用的排序

1.概念 排序是将一组数据,依指定的顺序进行排列的过程. 2.排序的分类 (1).内部排序 指将需要处理的所有数据都加载到内部存储器中进行排序.包括:交换式排序法,选择式排序法和插入式排序法 (2).外部排序 数据量过大,无法全部加载到内存中,需要借助外部存储进行排序.包括:合并排序…

FTP主动与被动模式

文件传送协议FTP: 提供交互式访问FTP屏蔽了各计算机系统的细节,因⽽适合于在异构⽹络中任意计算机之间传送⽂件。 传统FTP默认不加密 工作模式:(站在服务器的角度) 主动模式:服务器主动使用TCP20端口发起数…

群晖NAS配置SFTP服务并结合内网穿透工具实现无公网IP远程传输文件

文章目录 前言1. 开启群晖SFTP连接2. 群晖安装Cpolar工具3. 创建SFTP公网地址4. 群晖SFTP远程连接5. 固定SFTP公网地址6. SFTP固定地址连接 前言 本文主要介绍如何将在群晖NAS中开启SFTP服务,并安装cpolar内网穿透工具配置公网地址,轻松打造一套高效、安…

LRN正则化是什么?

LRN正则化,全称为Local Response Normalization(局部响应归一化),是一种在深度学习,特别是在卷积神经网络(CNN)中常用的正则化技术。该技术旨在通过模拟生物视觉系统中的侧抑制现象,…

【第0003页 · 递归】N皇后问题

【前言】本文以及之后的一些题解都会陆续整理到目录中,若想了解全部题解整理,请看这里: 第0003页 N皇后问题 今天我们来看一个著名的问题:N皇后问题。在此之前,我们先温习一下递归的思想。当然,温习的方式…

阅读笔记:明朝那些事儿人间再无魏忠贤

持续了10多天时间,明朝那些事儿第八部人间再无魏忠贤截止到今天凌晨0:58分看完了,给我印象比较深刻的人物杨涟,努尔哈赤,孙承宗,袁崇焕,魏忠贤,皇太极,熊廷弼&#xff0c…

C#MDI子窗体通过TabControl列表显示的控制实现过程

类似excel表格中各个表单sheet的切换效果,使用tabcontrol控件实现类似的功能。效果如下: 过程涉及父窗体MDIParent1、子窗体main、自定义基础功能类MdiChildBase。 基础功能类MdiChildBase继承自Form创建,定义了一个委托SetTabControlDelega…

项目:基于TCP的文件传输系统

项目介绍: 模拟FTP原理:客户端连接服务器后,向服务器发送一个文件。文件名可以通过参数指定,服务器端接收客户端传来的文件(文件名随意),如果文件不存在自动创建文件,如果文件存在,…

2024年整理的自动化测试面试题及答案

selenium中如何判断元素是否存在? 没有提供原生的方法判断元素是否存在,一般我们可以通过定位元素异常捕获的方式判断selenium中hidden或者是display = none的元素是否可以定位到?不可以,想点击的话,可以用…

C# 爬虫技术:京东视频内容抓取的实战案例分析

摘要 随着互联网技术的飞速发展,数据的获取和分析变得愈发重要。爬虫技术作为数据获取的重要手段之一,广泛应用于各个领域。本文将重点探讨C#语言在京东视频抓取中的实现过程,分析其技术细节,并提供相应的代码实现。 引言 京东…

python学习之路 - 面向对象编程

目录 一、面向对象编程1、成员方法a、类的定义和使用b、案例 2、类和对象3、构造方法4、其他内置方法(魔术方法)5、面向对象三大特性——封装a、介绍:b、表现形式:私有成员变量与私有成员方法c、作用 6、面向对象三大特性——继承…

iview Cascader 组件动态数据回显

在使用Cascader组件动态加载数据后,编辑的时候回显会有问题 问题如下:回显的时候,如果是多级,只显示了一级且,中间会闪一下 经过多方查找资料发现,是callback造成的。给组件增加on-visible-change事件监听…

如何下载淘宝的主图视频

目录: 1、通过插件插件下载短视频 1)获取“Microsoft Edge扩展” 2)搜索“aix智能下载器” 3)将插件钉在浏览器上 4)嗅控并下载视频 2、从其他来源安装插件 1、通过插件插件下载短视频 1)获取“M…

孙宇晨:以区块链科技为翼,青年企业家引领社会进步新航向

​ 孙宇晨,作为区块链领域的一位青年企业家,以其大胆的创新精神和卓越的远见,正在用区块链技术推动社会的进步。他不仅在加密货币和区块链技术领域取得了令人瞩目的成就,还通过不断的努力,致力于将这些技术应用…

FreeRTOS 列表 List 源码解析

目录 一、链表及链表项的定义1、链表节点数据结构 xList_ITEM2、链表精简节点结构 xMINI_LIST_ITEM3、链表根节点结构 xLIST 二、链表的相关操作1、初始化1.1 链表节点初始化1.2 链表根节点初始化 2、插入2.1 将节点插入到链表的尾部2.2 将节点按照升序排列插入到链表 3、删除4…

(go)线性表的顺序存储

闲来无事,更新一下,线性表的顺序存储,go语言版本,效果都已经测试过,下面给出各部分细节 文章目录 1、生成一个线性表2、查找3、插入4、求长度5、改值6、删除7、遍历8、测试程序9、完整代码总结 package mainimport &q…

VBA技术资料MF195:屏蔽工作表中的粘贴输入

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…