H5的FileReader分布读取文件应该如何使用以及其方法简介-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来H5的FileReader分布读取文件应该如何使用以及其方法简介，H5的FileReader分布读取文件的使用以及其方法简介的注意事项有哪些，下面就是实战案例，一起来看一下。

先介绍一下H5中FileReader的一些方法以及事件

FileReader方法

名称作用

about() 终止读取

readAsBinaryString(file) 将文件读取为二进制编码

readAsDataURL(file) 将文件读取为DataURL编码

readAsText(file, [encoding]) 将文件读取为文本

readAsArrayBuffer(file) 将文件读取为arraybuffer

FileReader事件

名称

作用

onloadstart 读取开始时触发

onprogress 读取中

onloadend 读取完成触发，无论成功或失败

onload 文件读取成功完成时触发

onabort 中断时触发

onerror 出错时触发

代码

分布读取文件核心思想, 将文件分块以每M进行读取.

HTML部分

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
  
<body>
    <form>
        <fieldset>
            <legend>分步读取文件：</legend>
            <input type="file" id="File">
            <input type="button" value="中断" id="Abort">
            <p>
                <lable>读取进度：</lable>
                <progress id="Progress" value="0" max="100"></progress>
            </p>
        </fieldset>
    </form>
    <script src="./loadFile.js"></script>
    <script>
  
            var progress = document.getElementById('Progress');//进度条
  
            var events = {
                load: function () {
                    console.log('loaded');
                },
                progress: function (percent) {
                    console.log(percent);
                    progress.value = percent;
                },
                success: function () {
                    console.log('success');
                }
            };
            var loader;
  
            // 选择好要上传的文件后触发onchange事件
            document.getElementById('File').onchange = function (e) {
                var file = this.files[0];
                console.log(file)
  
                //loadFile.js
                loader = new FileLoader(file, events);
            };
  
            document.getElementById('Abort').onclick = function () {
                loader.abort();
            }
        </script>
</body>
</html>