HTML5 - 文件读取API(FileReader)

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容