美文网首页迈进全栈工程师
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>
    

    相关文章

      网友评论

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

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