美文网首页迈进全栈工程师
HTML5 - 文件读取API(FileReader)

HTML5 - 文件读取API(FileReader)

作者: Hyso | 来源:发表于2019-03-04 16:52 被阅读0次

FileReader读取完文件后,会将结果存储在result属性中,而不是直接返回。

FileReader提供的读取文件的方法
  • readAsBinaryString
    将文件读取为二进制编码
  • readAsText
    将文件读取为文本
  • readAsDataURL
    将文件读取为DataURL
FileReader提供的事件
  • onabort
    读取文件中断时触发
  • onerror
    读取文件出错时触发
  • onload
    读取文件完成时触发,只在读取成功后触发
  • onloadend
    读取文件完成时触发,无论读取成功或失败都会触发
  • onloadstart
    读取文件开始时触发
  • onprogress
    正在读取文件
读取文件示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>read file</title>
</head>
<body>
    <input type="file" name="">
    <script type="text/javascript">
    var input = document.querySelector("input");
    input.onchange = function() {
        // 获取到文件
        var file = this.files[0];

        // 创建读取器
        var reader = new FileReader();

        // 开始读取
        reader.readAsText(file);

        // 文件读取完成后,获取读取的结果
        reader.onload = function() {
            console.log(reader.result);
        }
    }
    </script>
</body>
</html>

相关文章

  • 移动端上传图片

    html js FileReader是html5定义的用于读取文件的API,FileReader接口有4个方法,其...

  • fileReader相关

    FileReader是html5新增的API,允许异步读取用户本地文件的API。相关API: 参考:https:/...

  • FileReader 的使用

    FileReader作为文件API的重要成员用于读取文件,FileReader接口提供了读取文件的方法和包含读取结...

  • HTML5 - 文件读取API(FileReader)

    FileReader读取完文件后,会将结果存储在result属性中,而不是直接返回。 FileReader提供的读...

  • FileReader

    HTML5 FileReader API

  • 图片上传之预览

    预备知识 图片预览需要用到html5里面的FileReader对象,通过FileReader读取选择的图片文件,并...

  • 6 fileReader、websocket、移动端API、po

    1、fileReader实现读取文件、文件上传预览 -> 2、webSocket协议 ->HTML5 提供的一种在...

  • H5新增内容

    FIleReader文件读取API input 给input标签添加multiple属性,就可以选择多个文件 fi...

  • JavaScript之狗血笔记

    上传文件或目录 读取文件 调用FileReader对象的方法 (FileReader接口提供了读取文件的...

  • H5新增内容

    FIleReader文件读取API### input 给input标签添加multiple属性,就可以选择多...

网友评论

    本文标题:HTML5 - 文件读取API(FileReader)

    本文链接:https://www.haomeiwen.com/subject/twviuqtx.html