HTML5读取本地文件　FileReader API接口

最新推荐文章于 2022-07-01 16:15:16 发布

杨王畅

最新推荐文章于 2022-07-01 16:15:16 发布

阅读量320

点赞数

本文链接：https://blog.csdn.net/qq_45520554/article/details/112267432

版权

HTML5读取本地文件　FileReader API接口

html的结构是：

    <label for="uoload">上传文件：</label>
    <input type="file" name="upload" id="upload">
    
    <div id="show">
        <img src="" alt="" id="showimg">
    </div>

选择到需要读取的文件：

let uploadfile = upload.files[0];  // 获取到选择的文件 ,
console.log( uploadfile.name,'上传文件的选择');

打印的结果：

File {name: "Galio.png", lastModified: 1608113689446, lastModifiedDate: Wed Dec 16 2020 18:14:49 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 15279, …}lastModified: 1608113689446lastModifiedDate: Wed Dec 16 2020 18:14:49 GMT+0800 (中国标准时间) {}name: "Galio.png"size: 15279type: "image/png"webkitRelativePath: ""__proto__: File "上传文件的选择"

下面就是用FileReader API 的方法和事件来读取到文件并进行渲染

FileReader API有三个方法用来读取文件。分别是：

// 将文件读取为DataURL
reader.readAsDataURL(uploadfile);

// 将文件读取为二进制编码
reader.readAsBinaryString(uploadfile);

// 将文件读取为文本
reader.readAsText(uploadfile);

这三个方法读取到的文件会写到reader.result属性下。

FileReade rAPI 事件分别有：

事件	描述
onabort	中断
onerror	出错
onloadstart	开始
onprogress	正在读取
onload	成功读取
onloadend	读取完成（无论成功还是失败）

当文件读取完成时会触发相应的onload事件：

 reader.onload =function(){
                console.log('读取文件完成');
                console.log('读取的文件是：',reader.result);
                // 设置图片的路径，渲染到页面上
                showimg.src = reader.result
            }

完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传本地读取</title>
</head>
<body>
    <label for="uoload">上传文件：</label>
    <input type="file" name="upload" id="upload">
    
    <div id="show">
        <img src="" alt="" id="showimg">
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        upload.onchange = function(){
            let uploadfile = upload.files[0];  // 获取到选择的文件 ,
            console.log( uploadfile,'上传文件的选择');

            // 实例化FileReader 对象
            let reader = new FileReader();
            // 读取选择的文件
            // 将文件读取为DataURL
            reader.readAsDataURL(uploadfile);
            // 将文件读取为二进制编码
            // reader.readAsBinaryString(uploadfile);
            // 将文件读取为文本
            // reader.readAsText(uploadfile);

            reader.onload =function(){
                console.log('读取文件完成');
                console.log('读取的文件是：',reader.result);
                // 设置图片的路径
                showimg.src = reader.result
            }

        }


    </script>
</body>
</html>

杨王畅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5读取本地文件　FileReader API接口

HTML5读取本地文件　FileReader API接口html的结构是： <label for="uoload">上传文件：</label> <input type="file" name="upload" id="upload"> <div id="show"> <img src="" alt="" id="showimg"> </div>选择到需要读取的文件：let
复制链接

扫一扫