阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

前端培训-中级阶段(20)-文件API(FileReader)(2019-10-10期)

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116706.html

前端最基础的就是 HTML+CSS+Javascript
掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些
前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)

最常见的效果有 图片上传预览、类型检查、文件大小检查

File

File 继承了 Blob ,可以用于任意需要 Blob 类型的方法中,比如FileReader()URL.createObjectURL()XMLHttpRequest.send() 这些方法

File 对象属性

lastModified 返回当前 File 对象所引用文件最后修改时间,自 UNIX 时间起始值(1970年1月1日 00:00:00 UTC)以来的毫秒数
name 返回当前 File 对象所引用文件的名字
size 返回文件的大小(单位为字节)
size/1024KB,size/1024/1024MB
type 返回文件类型如 "image/png"

File 构造函数

file = new File(bits, name[, options]);

bits: ArrayBufferArrayBufferViewBlobArray
是 UTF-8 编码的文件内容
name: 表示文件名称options.type: 表示将要放到文件中的内容的 MIME 类型
默认值为 ""
options.lastModified: 表示文件最后修改时间的 Unix 时间戳(毫秒)
默认值为 Date.now()

FileReader

Blob类型的数据,只可以通过FileReader来读取

读取内容的方法都是异步,如果成功结果会放入result属性中

读取方法(都是异步)

readAsArrayBuffer() 以 ArrayBuffer 表示所读取的文件内容
可以更方便做计算,比如加密解密readAsBinaryString() 以 原始二进制 表示所读取的文件内容
很少用readAsDataURL() 以 data: URL格式的 Base64 字符串 表示所读取文件的内容
常用于图片文件,展示或其他用途readAsText() 以 字符串 表示所读取的文件内容

如果是纯文本文件,使用这个即可

事件回调

onabort 读取操作被中断时触发(FileReader.abort()onerror 读取操作发生错误时触发onload 读取操作完成时触发
这个时候 filesReader.result 中就有值了onloadstart 读取操作开始时触发onloadend 读取操作结束时(要么成功,要么失败)触发onprogress 进度

Blob

Blob 对象表示一个不可变、原始数据的类文件对象

Blob 表示的不一定是JavaScript原生格式的数据

File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件

实践一下

表单选择 input

效果传送门
经常用在上传文件中,我们监听inputchange事件

通过files属性来获取(因为input可以通过multiple来选择多个文件)

粘贴

粘贴需要监听 paste 事件,通过获取事件的Event对象e.clipboardData.files来获取所有的文件对象

拖拽

拖拽需要监听drop事件,并阻止默认事件(不阻止会使用浏览器打开),通过获取事件的Event对象e.dataTransfer.files来获取所有的文件对象

总结

File 继承了 BlobBlob 只可以使用 FileReader 来读取内容input 使用 e.target.files来获取粘贴 使用 e.clipboardData.files 来获取拖拽 使用 e.dataTransfer.files 来获取FileReader 获取内容是异步的,需要监听onload之后拿result

微信公众号:前端linong

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!