详见: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. matplotlib 进阶之origin and extent in imshow

    目录 显示的extent Explicit extent and axes limits matplotlib教程学习笔记 import numpy as np import matplotlib.p ...

  2. matplotlib 进阶之Constrained Layout Guide

    目录 简单的例子 Colorbars Suptitle Legends Padding and Spacing spacing with colobars rcParams Use with Grid ...

  3. kotlin+springboot+mybatis-puls+mysql搭建gradle-web工程

    kotlin+springboot+mybatis-puls+mysql搭建web工程 ​ 前段时间研究了spring security及OAuth2系列之后,本来打算研究spring的,但是部门发生 ...

  4. <学习opencv> opencv 概述及初探

    目录 Opencv3 当前模块 OpenCV 贡献库(opencv_contrib) OpenCV 头文件 旧式C风格头文件 新式C++风格头文件 例程 DEMO1 - 显示图片 DEMO2 - 视频 ...

  5. CS5263替代PS176|设计DP1.4转HDMI2.0音视频转换线方案|PS176方案

    PS176是一个显示端口 (DP)至HDMI 2.0视频接口转换器适用于需要视频协议转换的电缆适配器.电视接收器.监视器和其他应用.它将接受任何显示端口输入格式,包括DP 1.1a.dp1.2a.dp ...

  6. Android程序设计基础作业目录 (作业笔记)

    Android程序设计基础 • [目录] 第1章 Android程序入门 >>> 1.2.4 安装并配置 Android Studio 开发工具和 Genymotion 模拟器. 1 ...

  7. Browser Events 常用浏览器事件

    事件 说明 click 鼠标点击时触发此事件 dblclick 鼠标双击时触发此事件 mousedown 按下鼠标时触发此事件 mouseup 鼠标按下后松开鼠标时触发此事件 mouseover 当鼠 ...

  8. Java高级程序设计笔记 • 【第4章 网络编程】

    全部章节   >>>> 本章目录 4.1 网络基础知识 4.1.1 IP地址 4.1.2 端口号 4.1.3 使用InetAddress 4.1.4 InetAddress 类 ...

  9. 从零开始学springboot-1.创建项目

    新建一个项目 添加依赖 点击完成,项目结构如下 手动添加以下依赖 打开pom.xml文件,手动添加以下依赖,用于自动生成代码 <dependency> <groupId>com ...

  10. 自定义djangorestframework-simplejwt的验证表

    django restframework-simplejwt默认是通过调用django的get_user_model方法来得到验证表的表名,然后再通过查询id来验证是否有这个用户. 当需要自定义用户表 ...