详见:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#attr-multiple

使用 type="file" 的 <input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作。

除了被所有 <input> 元素共享的公共属性,file 类型的 input 还支持下列属性:

属性 说明
accept 一个或多个 unique file type specifiers 描述允许的文件类型
capture 捕获图像或视频数据的源
files FileList 列出了已选择的文件
multiple 布尔值,如果出现,则表示用户可以选择多个文件

accept

accept (en-US) 属性是一个字符串,它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的 唯一文件类型说明符 列表。由于给定的文件类型可以用多种方式指定,因此当你需要给定格式的文件时,提供一组完整的类型指定符是非常有用的。

例如,有许多方法可以识别 Microsoft Word 文件,所以接受 Word 文件的站点可以使用一个<input>

<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

capture

capture (en-US) 属性是一个字符串,如果 accept (en-US) 属性指出了 input 是图片或者视频类型,则它指定了使用哪个摄像头去这些数据。值 user 表示应该使用前置摄像头和/或麦克风。值 environment 表示应该使用后置摄像头和/或麦克风。如果缺少此属性,则 user agent 可以自由决定做什么。如果请求的前置模式不可用,则用户代理可能退回到其首选的默认模式。

Note: capture 以前是一个布尔类型的属性,如果存在,则请求使用设备的媒体捕获设备(如:摄像机),而不是请求一个文件输入。

files

FileList 对象每个已选择的文件。如果 multiple 属性没有指定,则这个列表只有一个成员。

multiple

当指定布尔类型属性 multiple (en-US), 文件 input 允许用户选择多个文件。

唯一文件类型说明符

唯一文件类型说明符是一个字符串,表示在 file 类型的 <input> 元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一:

  • 一个以英文句号(".")开头的合法的不区分大小写的文件名扩展名。例如: .jpg.pdf 或 .doc
  • 一个不带扩展名的 MIME 类型字符串。
  • 字符串 audio/*, 表示“任何音频文件”。
  • 字符串 video/*,表示 “任何视频文件”。
  • 字符串 image/*,表示 “任何图片文件”。

accept 属性的值是一个包含一个或多个(用逗号分隔)这种唯一文件类型说明符的字符串。 例如,一个文件选择器需要能被表示成一张图片的内容,包括标准的图片格式和 PDF 文件,大概是这样的:

<input type="file" accept="image/*,.pdf">

限制可接受的文件类型

通常,你不希望用户能够选择任意类型的文件;相反,你通常希望它们选择特定类型的文件。例如,如果你的文件输入让用户上传个人资料图片,您可能希望他们选择 Web 兼容的图像格式,如 JPEG 或 PNG

可以用 accept 属性指定可接受的文件类型,它是一个以逗号间隔的文件扩展名和 MIME 类型列表。一些例子:

  • accept="image/png" 或 accept=".png" — 接受 PNG 文件。
  • accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — 接受 PNG 或 JPEG 文件。
  • accept="image/*" — 接受带有一个 image/* MIME 类型的任何文件。(许多移动设备也允许用户在使用它时用摄像头拍照。)
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — 接受 MS Word 文档之类的任何文件。

<input type="file"> 标签详解的更多相关文章

  1. input type=file 标签禁止让用户手动输入

    常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...

  2. angularjs中使用 <input type="file">标签实现一次最多上传5张图片

    前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...

  3. python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  4. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  5. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...

  7. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  8. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  9. html标签详解(2)

    http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...

随机推荐

  1. FreeBSD 物理机下显卡的配置

    FreeBSD 已从 Linux 移植了显卡驱动,理论上,A 卡 N 卡均可在 amd64 架构上正常运行. 支持情况 对于 FreeBSD 11,支持情况同 Linux 内核 4.11: 对于 Fr ...

  2. Android开发案例 设置背景图片轮播

    点击按钮实现图片轮播效果 实践案例: xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...

  3. javaScript系列 [43]-TS、Class and ES5

    本文讨论Typescript中的Class同ES5构造函数的对应关系,涉及TypeScript的诸多语法.构造函数.面向对象以及原型对象等相关知识点细节,本文只简单对比并不进行深入展开. TypeSc ...

  4. SpringBoot 之 实现登录功能及登录拦截器

    增加登录退出控制器: # src/main/java/com/wu/controller/LoginController.java @Controller public class LoginCont ...

  5. ElasticSearch、Kibana 介绍&安装

    目录 ElasticSearch 介绍 基于数据库查询的问题 倒排(反向)索引 ES 存储和查询的原理 ES 核心概念 ES 安装 Kibana ElasticSearch 介绍 基于数据库查询的问题 ...

  6. NoSQL是什么(一)

    最常见的数据库可以分为下面的两种类型: RDBMS(关系型数据库):常见的关系型数据库有 Oracle.DB2.Microsoft SQL Server.Microsoft Access.MySQL: ...

  7. navicat 找不到系统路径 【修改了系统路径中文名称引起的】

    这是我还没修改系统路径中文名称时的路径, 怎么办? 关闭当前用户连接 右键,选择连接属性 把那个改了即可

  8. vue3.0+vite+ts项目搭建--基础配置(二)

    集成vue-router 使用yarn yarn add vue-router@next --save 安装完成之后在src目录下创建文件夹router/index.ts,创建完成之后需要在Vue-R ...

  9. PAT 乙级 1002. 写出这个数 (20)(C语言描述)

    读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10100. 输出格式:在一行内输出n的各位数字之和的每 ...

  10. EF4中多表关联查询Include的写法

    大家好,好久没有写作了,最近遇到了个问题,最终是靠自己的尝试写出来的,希望可以帮到有需要的人. 在我们查询时通常会遇到多级表关联的情况,很多时候有人会想写一个from LINQ语句来解决,那么冗长的代 ...