집 > 기사 > 웹 프론트엔드 > H5의 FileReader 배포판을 사용하여 파일을 읽는 방법과 해당 방법에 대한 소개

H5의 FileReader 배포판을 사용하여 파일을 읽는 방법과 해당 방법에 대한 소개

php中世界最好的语言원래의: 2018-01-29 09:34:332284검색

이번에는 H5의 FileReader 배포판을 사용하여 파일을 읽는 방법과 그 방법에 대해 간략하게 소개하겠습니다. H5의 FileReader 배포판을 사용하여 파일을 읽을 때 주의 사항과 그 방법 소개는 다음과 같습니다. 봐.

먼저 H5의 FileReader 메소드와 이벤트를 소개합니다

FileReader method

Name Function

about() 읽기 종료

readAsBinaryString(file) 파일을 바이너리 인코딩으로 읽기

readAsDataURL( file) 읽기 파일을 DataURL 인코딩으로

readAsText(file, [encoding]) 파일을 텍스트로 읽기

readAsArrayBuffer(file) 파일을 배열 버퍼로 읽기

FileReader event

Name

Function

onloadstart 다음 경우에 트리거됩니다. 읽기 시작

onprogress 읽기 진행 중

onloadend 성공이나 실패에 관계없이 읽기가 완료되면 트리거됩니다.

onload 파일 읽기가 성공적으로 완료되면 트리거됩니다.

onabort 중단되면 트리거됩니다.

onerror 오류가 발생하면 트리거됩니다.

Code

파일 분산 읽기의 핵심 아이디어는 파일을 블록으로 나누어 모든 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(&#39;Progress&#39;);//进度条
 
            var events = {
                load: function () {
                    console.log(&#39;loaded&#39;);
                },
                progress: function (percent) {
                    console.log(percent);
                    progress.value = percent;
                },
                success: function () {
                    console.log(&#39;success&#39;);
                }
            };
            var loader;
 
            // 选择好要上传的文件后触发onchange事件
            document.getElementById(&#39;File&#39;).onchange = function (e) {
                var file = this.files[0];
                console.log(file)
 
                //loadFile.js
                loader = new FileLoader(file, events);
            };
 
            document.getElementById(&#39;Abort&#39;).onclick = function () {
                loader.abort();
            }
        </script>
</body>
</html>

loadFile.js 부분

/*
* 文件读取模块
* file  文件对象
* events 事件回掉对象 包含 success , load, progress
*/
var FileLoader = function (file, events) {
    this.reader = new FileReader();
    this.file = file;
    this.loaded = 0;
    this.total = file.size;
    //每次读取1M
    this.step = 1024 * 1024;
    this.events = events || {};
    //读取第一块
    this.readBlob(0);
    this.bindEvent(); 
}
 
FileLoader.prototype = {
    bindEvent: function (events) {
        var _this = this,
            reader = this.reader;
 
        reader.onload = function (e) {
            _this.onLoad();
        };
 
        reader.onprogress = function (e) {
            _this.onProgress(e.loaded);
        };
 
        // start 、abort、error 回调暂时不加
    },
    // progress 事件回掉
    onProgress: function (loaded) {
        var percent,
            handler = this.events.progress;//进度条
 
        this.loaded += loaded;
        percent = (this.loaded / this.total) * 100;
        handler && handler(percent);
    },
    // 读取结束（每一次执行read结束时调用，并非整体）
    onLoad: function () {
        var handler = this.events.load;
 
        // 应该在这里发送读取的数据
        handler && handler(this.reader.result);
 
 
 
        // 如果未读取完毕继续读取
        if (this.loaded < this.total) {
            this.readBlob(this.loaded);
        } else {
            // 读取完毕
            this.loaded = this.total;
            // 如果有success回掉则执行
            this.events.success && this.events.success();
        }
    },
    // 读取文件内容
    readBlob: function (start) {
        var blob,
            file = this.file;
 
        // 如果支持 slice 方法，那么分步读取，不支持的话一次读取
        if (file.slice) {
            blob = file.slice(start, start + this.step);
        } else {
            blob = file;
        }
 
        this.reader.readAsText(blob);
    },
    // 中止读取
    abort: function () {
        var reader = this.reader;
 
        if(reader) {
            reader.abort();
        }
    }
}

읽고 나면 방법을 마스터했다고 믿습니다. 이러한 경우에 대해 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!