• 用FileReader对象从本地读取文件


     FileReader简介

    一、属性(以下属性均为只读)

    属性 介绍
    error 在读取文件时发生的错误
    readyState

    FileReader对象当前的状态,

    有三个: 0,1,2,

    分别对应的常量名为EMPTY、LOADING、DONE,

    分别表示数据还没有开始读取,正在读取,读取成功

    result

    读取完成之后的内容

    只有在读取完成之后有效

    格式由用哪个函数读取决定

    例如: 用readAsBinaryString函数,读取完之后就是二进制字符串,

    具体参见方法

    二、方法

    方法 描述 参数
    abort() 中止读取操作
    readAsArrayBufffer()

    读取File或Blob对象,并将读取完成的内容放在result属性中,readState

    置为2,如果定义了事件处理函数onloadend,会在执行完之后调用。

    这四个函数的不同处就在于在result中生成的内容格式不一样。

    readAsArrayBufffer执行完之后会在result属性中生成一个ArrayBuffer格式的内容;

    readAsBinaryString生成的是所读取文件的原始二进制数据;

    readAsDataUrl将包含一个data:URL格式的字符串以表示所读取文件的内容;

    readAsText是一个字符串的读取结果。

    将要读取的File或Blob对象
    readAsBinaryString() 同上
    readAsDataURL() 同上
    readAsText()

    arguments[0]:将要读取的File或Blob对象

    arguments[1]: 可选一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.

    DataURL是一种格式,用base64将内容加密,然后将加密后的内容放在URL中,一般格式小的图片,字体图标或者其他体积小的文件可以用这种格式展现,可以http减少请求次数。

    三、事件处理函数

    方法 描述 事件对象

    onabort

    当读取操作被中止时调用

    事件对象中有是否冒泡,

    事件类型

    已读取量

    读取总量等属性,

    可自行打印查看

    onerror 当读取操作发生错误时调用
    onload 当读取操作完成且成功时调用
    onloadend 当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用
    onloadstart 当读取操作将要开始之前调用
    onprogress 在读取数据过程中周期性调用(例如设置加载进度条时会使用)

    四、浏览器兼容

    谷歌  7 

    IE 10

    火狐 3.6

    欧朋和苹果未实现

    五、应用场景

    按指定格式读取本地文件到脚本对象中,然后进行文件上传前的展示,判断

    我是什么时候用到的呢,就是在图片上传之前要将需要上传的图片展示给用户,并需要判断图片宽高分别是多少像素等

    这时候就要new一个FileReader对象,然后将inputElement.files[0]传入readAsDataURL方法,获取地址,将FileReader对象的result属性给指定Image对象的src,就可以在本地显示图片了

    这时候获取图片宽高的话应该不是图片原始的值,要想解决这个问题还需要new一个image对象,然后将FileReader对象的result属性赋值给这个new出来的对象的src属性,再获取image对象的 naturalWidth,naturalHeight就可以了

    六、参考链接

    https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

  • 相关阅读:
    浏览器事件.html
    奇数(11~99)四个一行输出.html
    JDBC系列教材 (十一)- 数据库连接池
    JDBC系列教材 (十)- 基于JDBC设计DAO的实例
    JDBC系列教材 (九)- 使用JDBC做一个ORM例子
    JDBC系列教材 (八)- 如何在JDBC中使用事务
    JDBC系列教材 (七)- 获取自增长id以及表的元数据
    JDBC系列教材 (六)- 中execute与executeUpdate的区别
    JDBC系列教材 (五)- 在JDBC中使用预编译Statement 以及它的优点
    JDBC系列教材 (四)- 在JDBC中使用ResultSet查询SQL语句
  • 原文地址:https://www.cnblogs.com/jiumengmeng/p/7744163.html
Copyright © 2020-2023  润新知