이 기사에서는 HTML5 FileReader의 파일 분산 읽기와 그 방법에 대해 간략하게 소개하고 모든 사람과 공유합니다. 세부사항은 다음과 같습니다:
렌더링
이전 규칙은 렌더링을 먼저 표시하는 것입니다.
먼저 H5에서 FileReader의 일부 메서드와 이벤트를 소개합니다.
FileReader 메서드
| 이름 | 효과 |
|---|---|
| 에 대한() | 읽기 종료 |
| readAsBinaryString(파일) | 파일을 바이너리 인코딩으로 읽기 |
| readAsDataURL(파일) | DataURL로 인코딩된 파일 읽기 |
| readAsText(파일, [인코딩]) | 파일을 텍스트로 읽기 |
| readAsArrayBuffer(파일) | arraybuffer로 파일 읽기 |
FileReader이벤트
| 이름 | 효과 |
|---|---|
| onloadstart | 읽기가 시작되면 실행됩니다. |
| 진행 중 | 독서 |
| 온로드엔드 | 성공 또는 실패에 관계없이 읽기 완료에 의해 트리거됨 |
| 온로드 | 파일 읽기가 성공적으로 완료되면 트리거됩니다. |
| 중단하다 | 인터럽트 시 트리거됨 |
| 오류 발생 시 | 오류 발생 시 트리거됨 |
암호
파일의 분산 읽기의 핵심 아이디어는 파일을 블록으로 나누어 M 단위로 읽는 것입니다.
HTML 부분
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>문서</title></head><body> <form> <fieldset> <legend>단계별 읽기 파일:</legend> <input type=file id=File> <input type=button value=interrupt 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); Success: function () { console.log('success'); var loader; // 업로드할 파일을 선택한 후 onchange 이벤트를 트리거합니다. document.getElementById('File').onchange = function (e) { file = this.files[0]; console.log(file) //loadFile.js loader = new FileLoader(file, events) }; document.getElementById('Abort').onclick = function () { loader.abort() } </script></body></html>loadFile.js 섹션
/** 파일 읽기 모듈* 파일 파일 객체* 이벤트 이벤트 반환 객체에는 성공, 로드, 진행률이 포함됩니다.*/var FileLoader = function (file, events) { this.reader = new FileReader(); 로드됨 = 0; this.total = file.size; //1M씩 읽음 this.step = 1024 * 1024; events || //첫 번째 블록 읽기 this.readBlob(0); this.bindEvent(); }FileLoader.prototype = { binEvent: function (events) { var _this = this, reader.onload = function ( e ) { _this.onLoad(); }; reader.onprogress = function (e) { _this.onProgress(e.loaded) }; , 중단, 오류 콜백은 당분간 추가되지 않습니다.}, // 진행 이벤트는 onProgress를 반환합니다: function (loaded) { var rates, handler = this.events.progress;//Progress bar this.loaded += rates; = (this.loaded / this.total) * 100; handler && handler(percent) }, //읽기 끝(전체가 아닌 각 읽기 실행이 끝날 때 호출됨) 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; // 성공하면 this.events.success &&를 실행하세요. this.events.success(); } }, // 파일 내용 읽기 readBlob: function (start) { var blob, file = this.file; // 슬라이스 메서드가 지원되면 단계적으로 읽습니다. 한 번 읽기 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() }}위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.