file

来源：互联网发布：美国mac气动官网中文版编辑：程序博客网时间：2024/06/03 18:55

<body><input type="file" multiple size="80" id="file"><button onclick="showName()">上传</button><script type="text/javascript">function showName(){var file;//document.getElementById('file').files返回fileList文件列表对象var len = document.getElementById('file').files.length;for(let i = 0; i<len; i++){//file对象为用户选择单个文件file = document.getElementById('file').files[i];//此处可以针对fileList文件列表中每个文件进行多种处理alert(file.name)}}</script></body></html>

file弹出文件名

blob表示二进制原始数据，他提供一个slice方法，可以通过该方法访问到字节内部的原始数据块。事实上，上面提到的file对象也继承了这个blob对象

blob对象有两个属性，size属性表示一个blob对象的字节长度，type属性表示blob的mime类型，如果是未知类型，则返回空字符串。

对于图像类型的文件，blob对象的type属性都是以“image/”开头的，后面是图像的类型，利用此特性我们可以在js中判断用户选择的文件是否为图像，在图片上传时可以利用该规则进行文件筛选。

另外，html5中在file控件中添加了accept属性，可以在用户选择时提前限制文件的类型，但是这个还是能更改成所有的文件

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

<title>blob对象</title><style></style></head><body><input type="file" multiple size="80" id="file"><button onclick="fileUpdate()">上传</button><script type="text/javascript">function fileUpdate(){var file;//document.getElementById('file').files返回fileList文件列表对象var len = document.getElementById('file').files.length;for(let i = 0; i<len; i++){//file对象为用户选择单个文件file = document.getElementById('file').files[i];//此处可以针对fileList文件列表中每个文件进行多种处理if(!/image\/\w+/.test(file.type)){alert('上传文件格式不正确');break;}else{//此处为上传代码alert('上传成功');}}}</script>

fileReader接口

fileReader接口主要用来把文件读入内存，并且读取文件中的数据。fileReader接口提供了一个一部API，使用该API可以在浏览器主线程中一部访问文件系统，读取文件中的数据。各个浏览器支持的程度不同，有一种方法可以检测浏览器是否支持fileReader

if(typeof FileReader == 'undefined'){alert('no')}else{alert('yes')}

fileReader接口拥有4个方法，其中三个用于读取文件，另一个用于将读取过程中断。

需要注意的是：无论读取成功或失败，方法不会返回读取结果，这一结果存储在result属性中。

方法名参数描述

readAsBinaryString file讲一个文件读取为二进制码

readAsText file,[encoding]将文件读取为文本

readAsDataURL file将文件读取为DataURL

abort （none）中断读取操作

readAsText：该方法有两个参数，第二个是文件的编码方式，默认utf-8。将文件以文本方式读取，读取结果即是这个文本文件中的内容。

readAsBinaryString：这个方法将文件读取为二进制字符串，通常我们将它传送到后端，后端利用这段字符串存储文件。

readAsDataURL：该方法将文件读取为一串DataURL字符串，该方法实际上是将小文件以一种特殊格式的URL地址形式直接读取入页面。这里的小文件通常是指图像与html等格式的文件。

fileReader的接口事件：

除了以上的方法外，fileReader接口还包含了一套完整的事件模型，用于捕获读取文件时的状态

事件描述

onabort 数据读取中断时触发

onerror 数据读取出错时触发

onloadstart数据读取开始时触发

onprogress 数据读取中

onload 数据读取成功完成时触发

onloadend 数据读取完成事触发，无论成功或失败

阅读全文

0 0