[JS] FileReader

... function onchangefile(e) { var reader = new FileReader(); var file = e.target.files[0]; reader.onload = function (event) { console.log('onload'); var txt = reader.result; addTxt(txt); progBar.style.width = progWrap.offsetWidth + 'px'; } reader.onerror = function() { console.log('onerror'); if (reader.error.code === reader.error.NOT_READABLE_ERR) { alert('파일 읽기 권한이 없습니다.'); } else if (reader.error.code === reader.error.ABORT_ERR) { alert('파일 읽기가 중지됐습니다.'); } else { alert('파일 읽기에 실패했습니다.'); } } reader.onprogress = function(event) { console.log('progress'); if (event.lengthComputable) { var loaded = (event.loaded / event.total); progBar.style.width = progWrap.offsetWidth * loaded + 'px'; } } progBar.style.width = '0px'; reader.readAsText(file); } function addTxt(t) { var lbl = document.createElement('span'); lbl.innerText = t; con.appendChild(lbl); } ... <div id="progWrap" style="width:300px;height:3px;background:#ECECEC;"> <div id="progBar" style="width:0;height:3px;background:#FF8000;"></div> </div> <br> <input type="file" onchange="onchangefile(event)"> <div id="con"></div> ...  

나눠서 부분적 로드(onchangefile 함수 외 코드 상동)

... function onchangefile(e) { var divCnt = 0; var divSize = 100; // 100byte 단위 로드 var file = e.target.files[0]; console.log(file.size + 'byte'); divCnt = file.size / divSize; if (divCnt.toString().indexOf('.') != -1) divCnt++; lastPos = 0; getDiff(file,lastPos,divSize); function getDiff(f,stPos,chunkSize) { var blob = f.slice(stPos,stPos + chunkSize); var reader = new FileReader(); reader.onload = function() { console.log("onload " + blob.size); var txt = reader.result; addTxt(txt); lastPos = stPos + chunkSize; if (f.size == lastPos) { setStyle_prog( 100 ); console.log('completed'); return; } else if (lastPos+chunkSize > f.size) chunkSize = f.size - lastPos; setStyle_prog( (stPos / f.size) * 100 ); getDiff(f,lastPos,chunkSize); }// end reader.onload reader.readAsText(blob); }// end getDiff function setStyle_prog(percent) { progBar.style.width = progWrap.offsetWidth * (percent/100) + 'px'; } }// end onchangefile ...