JavaScript的FileReader对象

最新推荐文章于 2024-04-26 10:22:03 发布

I'm Mr.C

最新推荐文章于 2024-04-26 10:22:03 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44849271/article/details/117853004

版权

JavaScript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

JS的FileReader对象

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

说白了就是使用JS操作文件

FileReader的方法

方法名	描述
abort()	中止文件的读取
readAsArrayBuffer(file)	按字节读取文件内容，结果用ArrayBuffer对象表示
readAsBinaryString(file)	按字节读取文件内容，结果为文件的二进制串
readAsDataURL(file)	读取文件内容，结果用data:url的字符串形式表示
readAsText(file)	按字符读取文件内容，结果用字符串形式表示

FileReader的事件

事件名	描述
onabort	操作被中止时调用
onerror	操作发生错误时调用
onload	操作成功完成时调用
onloadend	操作完成时调用,不管是成功还是失败
onloadstart	操作将要开始之前调用
onprogress	操作中调用

FileReader使用语法

let file=new FileReader();

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" value="上传图片" onchange="upload(this)">
    <script>
        function upload(e){
            let fl=new FileReader();
            fl.readAsDataURL(e.files[0]);
            fl.onload=(item)=>{
                console.log(item);
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

I'm Mr.C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的FileReader对象

JS的FileReader对象FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。说白了就是使用JS操作文件FileReader的方法方法名描述abort()中止文件的读取readAsArrayBuffer(file)按字节读取文件内容，结果用ArrayBuffer对象表示readAsBinaryString(file)按字节读取文件内容，结果为文
复制链接

扫一扫