<input type="file"> 标签详解
详见: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 可以自由决定做什么。如果请求的前置模式不可用,则用户代理可能退回到其首选的默认模式。
capture
以前是一个布尔类型的属性,如果存在,则请求使用设备的媒体捕获设备(如:摄像机),而不是请求一个文件输入。files
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"> 标签详解的更多相关文章
- input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击“浏览”按钮,在弹出的文件选择对话框 ...
- angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备: 1.angular.js 2.bootstrap.css 具体如何实现呢?请看下面代码哈哈哈. 在angular项目中,如果要给<input type="file" ...
- python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题
要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...
- 修改input type=file 标签默认样式的简单方法
<html><head><title></title></head><body><form id="upload ...
- 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Android WebView 不支持 H5 input type="file" 解决方法
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webvie ...
- 引用 struts2标签详解 - wo的的日志 - 网易博客
引用 元元 的 struts2标签详解 引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...
- html标签详解
html标签详解 <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...
- html标签详解(2)
http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...
随机推荐
- Service有多个实现类,它怎么知道该注入哪个ServiceImpl类
方法一:Controller中注入service的时候使用@Autowired自动注入,@Qualifier("beanId")来指定注入哪一个. 方法二:Controller中注 ...
- Chapter 15 Outcome Regression and Propensity Scores
目录 15.1 Outcome regression 15.2 Propensity scores 15.3 Propensity stratification and standardization ...
- [数据结构]严蔚敏版(C数据结构)配套实现程序111例
以下为根据严蔚敏版数据结构的示例和概念实现的程序 目录 一.严蔚敏版(C数据结构)配套实现程序111例 1.数组与字符串 2.栈与队列 3.链表LinkList 4.树与二叉树 5.排序相关算法 6. ...
- 编写Java程序,方法练习题__构建英雄类,定义一个int类型的变量output,表示英雄的血量
返回本章节 返回作业目录 需求说明: 定义一个int类型的变量output,表示英雄的血量,当battle()方法执行一次,output变量值减少10.在控制台随机输入一个小于100的整数,将该整数值 ...
- gPRC基本介绍
1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...
- SpringBoot 之 配置文件、yaml语法、配置注入、松散绑定
配置文件 SpringBoot 有两种配置文件格式,二选一即可,官方推荐 yaml: application.properties key=value的格式 application.yaml key: ...
- Arrays.sort实现原理
Collections.sort方法底层就是调用的array.sort方法 比较器的方式 TimSort static void sort(Object[] a, int lo, int hi, Ob ...
- Linux下校验SHA1和MD5的方法
当我们从互联网下载东西或者从U盘拷贝东西的时候,通常是不会和源文件有什么区别的,但是在偶然的情况下会出现下载或者拷贝出错的情况, 尤其是在下载大文件的时候,比如系统光盘......当你装机到一半才发现 ...
- Python之路 - Day4 - Python基础4 (新版)
本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 作业:ATM项目开发 1.列表生成式,迭代器&生成器 列表生成式 孩子,我现在有个需 ...
- 第10组 Alpha冲刺 (2/6)
1.1基本情况 ·队名:今晚不睡觉 ·组长博客:https://www.cnblogs.com/cpandbb/ ·作业博客:https://edu.cnblogs.com/campus/fzu/FZ ...