05-HTML5强大的新 API，01-文件 API

最新推荐文章于 2024-11-01 13:37:40 发布

L鹿先生

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量172

点赞数

分类专栏： HTML5 文章标签： html5 前端 api

本文链接：https://blog.csdn.net/weixin_44077629/article/details/104761336

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5的文件API允许在向服务器发送图片时创建缩略图预览，并在用户离线时保存文件引用。通过检查文件的type和扩展名，可以验证上传内容。FileReader接口用于异步读取文件，支持读取为文本、二进制字符串或DataURL。此外，可以监听读取进度并在onloadend事件中处理成功或失败情况。

摘要由CSDN通过智能技术生成

HTML5 API

1、文件 API （规范与本地文件进行交互的标准方法）

2、拖放 API （提供了直接支持拖放操作的API）

3、地理定位 （获取地理位置信息）

4、web 存储 （在本地存储用户的浏览数据）	

5、Web SQL	（在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）

6、应用程序缓存 （创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。）

7、Web Sockets （在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。）

8、SSE	（网页自动获取来自服务器的更新）

9、Web Workers （运行在后台的 JavaScript，不会影响页面的性能）

10、......

1、文件 API

在使用 File API 在向服务器发送图片的过程中可以创建图片的缩略图预览，也可以允许应用程序在用户离线时保存文件引用。另外，您可以使用客户端逻辑来验证上传内容的 type 与其文件扩展名是否匹配，或者限制上传内容的大小。

<input type = "file" id = "file" multiple  accept = "image/*"/>

multiple表示可以多选
accept表示只接受某个类型的文件，貌似浏览器只支持，上传图片的情况

var file = document.querySelector("#file");
file.files //文件列表，值为类数组
file.files.length //上传了几个文件
file.files[0].name // 文件名
file.files[0].lastModifiedDate // 文件最后被修改的日期
file.files[0].size //文件大小
file.files[0].type //文件类型！important：若上传文件类型为图片，type值为以"image/"开头，所以可以根据此判断上传的文件类型。 /image/\w+/.test(file.type) //测试文件的类型是不是图片

FileReader接口：（考虑浏览器是否支持FileReader接口！important）
FileReader接口主要来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

有种方法可以检测你的浏览器是否对FileReader接口提供支持:
if(typeof FileReader == ‘undefined’){alert(“您的浏览器未实现FileReader接口”)}else{var reader = new FileReader();//正常实现浏览器}

FileReader接口有四个方法，3个用以读取文件，另一个用来将读取过程中断。无论读取成功或失败，方法并不会返回读取结构，这一结构存储在result属性中。
readAsBinaryString（文件）将文件读取为二进制码

readAsText （文件，文件类型）将文件读取为文本

readAsDataURL （文件）将文件读取为DataURL

abort (none) 中断读取操作

readAsText（文件名，文本编码方式默认为UTF-8）将文件以文本方式读取，读取结果就是这个文本中的内容
readAsBinaryString 将文件读取为二进制字符串，通常我们把它送到后端，后端可以通过这段字符串存储文件
readAsDataUR 该方法将文件读取为一串Data URL字符串，该方法事实上是将小文件以一种特殊格式的URL地址形式直接读入页面。这里的小文件指图像、html等格式的文件

FileReader接口的事件：
onabort 数据读取中断时触发
onerror 数据读取出错时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成时触发
onloadend 数据读取完成时触发，无论成功或失败

我们需要编写的代码主要都是在onprogress事件中，例如可以在html5中的新元素progress来显示大文件的读取完成百分比。如下：

<input type = "file" id = "file" multiple><br>
<progress min = "0" max = "100"  value = "0"></progress><br>
var fileInput = document.getElementById("file");

//显示加载进度
document.querySelector("#showProgress").onclick = function(){
	//获取文件
	var files = fileInput.files;
	for(var n = 0; n < files.length; n++){
		var reader = new FileReader();
		reader.readAsBinaryString(files[n]);
		//监听文件加载进度
		reader.onprogress = function(e){
			//计算加载进度0-100 
			var percent = parseInt(e.loaded / e.total *100);
			//使用进度条显示加载进度
			document.querySelector("progress").value = percent;
		};
	}
};

参考阅读：