input类型为 file 的相关知识点

type为file的是文件上传的类型。使用户可以选择一个或多个元素以提交表单的方式上传到服务器上。

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>

1.常用的三个属性

accept 属性接受一个逗号分隔的 MIME 类型字符串，如：accept=“image/png, image/jpeg” or accept=".png, .jpg, .jpeg"
multiple（html5的属性）：这个属性指示用户能否输入多个值。这个属性仅在type属性为email或file的时候生效 ; 否则被忽视。（兼容性 >ie9 2019年3月25日）
required（html5的属性）：指定用户在提交表单之前必须为该元素填充值.（兼容性 >ie9 2019年3月25日）

2.FileList对象

通过获取dom元素来获得。如下：

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple required>
// 获取dom 对象
let file = document.getElementById("avatar");
// FileList 对象如下：
let fileList = file.files;  // 表示 fileList 对象集合

FileList 包含 File 对象。
File对象的值包含如下：（只读）

name：文件名
lastModified：UNIX timestamp 形式的最后修改时间
lastModifiedDate： Date 形式的最后修改时间
size：文件的字节大小
type：文件的MIME类型

3.Blob对象

定义：表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。
生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。
如下：

//1. 构造函数
new Blob(blobParts[, options])//2. slice方法
Blob.slice([start,[ end ,[contentType]]])

4.FileReader 对象（兼容 ie10 以上）

定义：允许程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据（为参数）。

let reader = new FileReader();

属性有：

error: 表示读取文件发生的错误。
readyState: 表示状态的数字。 EMPTY(0)：未加载。 LOADING(1)：正在加载。 DONE(2)：加载完成。
result: 文件的内容。该属性仅在读取操作完成后才有效

事件处理（继承自EventTarget）:

onabort：该事件在读取操作被中断时触发。
onerror：该事件在读取操作发生错误时触发。
onload：该事件在读取操作完成时触发。
onloadstart：该事件在读取操作开始时触发。
onloadend：该事件在读取操作结束时（要么成功，要么失败）触发。
onprogress：该事件在读取Blob时触发。

方法：

abort()：中止读取操作。在返回时，readyState属性为DONE
readAsArrayBuffer()：开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.即blob 格式
readAsDataURL()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。即base64 的格式
readAsText()：开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容

5.上传文件的案例（简单版的）

// html
<input type="file" id="avatar" name="avatar" value="" accept="image/png, image/jpeg" multiple required>// js代码(function () {let inputFile = document.getElementById("avatar");inputFile.addEventListener('change', handle, false);function handle(event) {//上传图片let e = event || window.event;let files = e.target.files;if (files.length > 0) {let file = e.target.files[0];let fileName = e.target.files[0].name;  // 文件名称let fileSize = e.target.files[0].size;  // 文件大小if (fileSize > 4 * 1024 * 1024) {alert('上传图片大小不要超过4M');return false;}if (!/\.(jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {alert('图片类型必须是jpeg,jpg,png中的一种');return false;}let reader = new FileReader(); // 创建一个 filereader对象reader.onload = e => {let data;if (typeof e.target.result === "object") {// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]));} else {data = e.target.result;}// 获取得到的文件信息console.log(data)};// 转化为base64reader.readAsDataURL(file);// 转化为blob// reader.readAsArrayBuffer(file);}}})()

6.一些相关的MIME 文件类型

更丰富的MIME类型点这里（是链接）。

常用的扩展类型如下：

扩展类型	MIME类型
.cvs	text/csv
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.xlsx	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation
.pdf	application/pdf
.png	image/png
.jpeg .jpg	image/jpeg
.gif	image/gif
.rar	application/x-rar-compressed
.zip	application/zip
.xml	application/xml

备注：如果在accept 限制类型不好使的时候可以尝试下，在accept 中写文件后缀。如application/x-rar-compressed 写成 .rar

最后：如果有不对的地方欢迎指正！更新时间：2019年3月25日

input类型为 file 的相关知识点总结和使用相关推荐

input类型为file时，accept为表格xlsl
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadshe ...
HTML相关知识点总结
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 目录简介 HTML文档 ...
Redis:相关知识点纵观
这篇文章先简单的介绍一下redis有什么相关知识点,然后再从接下去的一些文章对一些重要的知识点进行总结. 一.Redis 是什么 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存 ...
Linux安装和管理程序的相关知识点
Linux安装和管理程序的相关知识点一.Linux应用程序基础 1.应用程序与系统命令的关系 2.典型的应用程序结构 3.常见软件包封装类型二.RPM软件包管理工具 1.RPM包管理工具 2.RP ...
Redis 相关知识点
Redis 相关知识点概述为什么要用缓存为什么用redis 用redis缓存了哪些东西单线程redis为什么这么快 redis的数据类型和使用场景 redis 的过期策略都有哪些?内存淘汰机制 ...
Get Offer —— 渗透测试岗试题汇总（Web相关知识点）
点赞后看,养成习惯喜欢的话可以点个关注哟你们的点赞支持对博主们来说很重要哦 !!! 为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 00 前情提要 01 Web相关知识点 1.漏洞类 2.情 ...
redis相关知识点讲解，redis面试题
redis相关知识点讲解,redis面试题 1. redis基本知识点 1.1 什么是redis? 1.2 redis的key的设计 1.3 redis的value数据类型有哪些? 1.3.1 str ...
js 闭包及其相关知识点理解
本文结合个人学习及实践,对闭包及相关知识点进行总结记录,欢迎读者提出任何不足之处一.js变量二.作用域(scope) 三.[[scope]] 和 scope chain 四.作用域(scope)和 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...

input类型为 file 的相关知识点总结和使用