HTML5中的FileReader

最新推荐文章于 2024-05-04 01:19:53 发布

花开不合阳春暮

最新推荐文章于 2024-05-04 01:19:53 发布

阅读量205

点赞数

分类专栏：日常积累文章标签： html5 FileReader 图片上传预览

本文链接：https://blog.csdn.net/wszcy199503/article/details/78845536

版权

日常积累专栏收录该内容

24 篇文章 0 订阅

订阅专栏

调用FileReader对象的方法

FileReader无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

处理事件

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

fr.onload = function() {  
    this.result;  
};

一个简单的图片上传预览功能：

<html>
<head>
    <meta charset="utf-8">
    <title>FileReader</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<section>
    <div>
        <input type="file" accept="image/*" onchange="previewImg(this);"/>
        <div class="current"></div>
    </div>
</section>
<script type="text/javascript">
    function previewImg(fileDom) {
        console.log(fileDom);
        if (fileDom.files && fileDom.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var $img = $("<img src='" + e.target.result + "'>");
                $('.current').text('').append($img);
            }
            reader.readAsDataURL(fileDom.files[0]);
        }
    }
</script>
</body>
</html>