HTML5中的File API

Kaede 发布于2019-08-05 11:45 / 855人阅读

摘要：创建新对象属性读取文件时发生的错误表明对象的当前状态读取到的文件内容，只在读取操作完成后才有效，数据格式取决于采用的读取操作方法中止该读取操作。以纯文本的形式读取，中的数据为字符串。属性中将包含一个格式的字符串。读取文件的二进制源码。

file　提供文件有关的信息

1. file对象

file对象的来源一般分为３种：

（１）在元素上选择上传文件后返回的Filelist对象；
（２）由拖放操作产生的DataTransfer对象；
（３）HTMLCanvasElement的mozGetAsFile() API；

此处讨论的是第一种，获取file对象：

let file = e.target.files[0];//获取file 对象，当上传多个文件（图片）时，０表示第一个

属性：

lastModified:　1496803445926;//所引用文件最后修改时间
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最后修改时间的 Date 对象
name: "多Y图.svg";//所引用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互联网邮件扩展类型
webkitRelativePath: "";//返回 File 相关的 path 或 URL

另，多张图片的上传原理类似，需注意以下三点：

1.设置multiple
2.通过循环取出每张图片，放到指定地方
3.每次循环的时候重新new FileReader()对象

2. FileReader()对象

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

let reader = new FileReader();//创建新对象

属性:

    error: 读取文件时发生的错误；
    readyState: 表明FileReader对象的当前状态；
    result: 读取到的文件内容，只在读取操作完成后才有效，数据格式取决于采用的读取操作；

方法:

abort()：中止该读取操作。

readAsText(file, encoding)：以纯文本的形式读取，result中的数据为字符串。

readAsDataURL(file)：result属性中将包含一个data:url格式的字符串。

readAsArrayBuffer(file): result属性中将包含一个ArrayBuffer对象。

readAsBinaryString(file)：读取文件的二进制源码。

事件处理程序

onabort: 当读取操作被中止时调用

onerror：当读取操作发生错误时调用

onload: 当读取操作成功完成时调用

onloadend: 当读取操作完成时（不管成功还是失败），在onload或者onerror之后调用

onloadstart: 当读取操作将要开始时调用

onprogress: 在读取数据过程中周期性调用

3.示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56479.html

HTML5中的File API

摘要：创建新对象属性读取文件时发生的错误表明对象的当前状态读取到的文件内容，只在读取操作完成后才有效，数据格式取决于采用的读取操作方法中止该读取操作。以纯文本的形式读取，中的数据为字符串。属性中将包含一个格式的字符串。读取文件的二进制源码。 file　提供文件有关的信息 1. file对象 file对象的来源一般分为３种：（１）在元素上选择上传文件后返回的Filelist对象；（２）由...

xiguadada 2019-08-20 18:27 评论0 收藏0
利用html5 file api读取本地文件（如图片、PDF等）

摘要：对象不单独存在，而是以数组形式，存在一个名为的数组中。读取对象并存放为格式的字符串。比较这两种读取对象的方案，适合用来上传文件，而则适合直接在浏览器进行操作，然后操作后再把处理后的数据进行上传，例如利用截图或进行图片压缩等。在html4的年代，我们如果要在网页上呈现一张用户本地的图片，需要用户先把图片上传到服务器，再根据服务器提供的图片地址把图片下载下来，才能把图片在网页上呈现出来。...

keke 2019-08-02 18:24 评论0 收藏0
HTML5 DOM File API

摘要：文件名只读字符串不包含任何路径信息。文件大小单位为字节只读的位整数。访问选中的文件简单的html代码：通过File API,我们可以在用户选取一个或者多个文件之后（如果你的程序可以让用户选择多个文件,记得要在input元素上加上multiple属性）,访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中. 如果用户只选择了一个文件,那...

chemzqm 2019-08-02 18:11 评论0 收藏0
HTML5文件操作-文件上传（上）

摘要：最后一次修改文件的时间。选择文件代码上传如图这时看文字显示如图此时我们在获得对象时，不能用这种方式获取文件对象了不然只获取的是对象集合里面的一个对象。 js要操作文件，首先得讲到的是文件api里常见的几个对象： 1，Blob 2，File 3，FileList 4，FileReader 1.1 Blob对象表示的是二进制数据，提供了一个slice方法，该方法可以访问到字节内部的数据段...

EddieChan 2019-08-05 11:13 评论0 收藏0
HTML5文件操作-文件上传（上）

摘要：最后一次修改文件的时间。选择文件代码上传如图这时看文字显示如图此时我们在获得对象时，不能用这种方式获取文件对象了不然只获取的是对象集合里面的一个对象。 js要操作文件，首先得讲到的是文件api里常见的几个对象： 1，Blob 2，File 3，FileList 4，FileReader 1.1 Blob对象表示的是二进制数据，提供了一个slice方法，该方法可以访问到字节内部的数据段...

xorpay 2019-08-20 16:15 评论0 收藏0