HTML5-6【讀取檔案、分割檔案、監控讀取檔案進度】
阿新 • • 發佈：2021-02-04
技術標籤：HTML5javascripthtml5
一.讀取檔案
(1).檔案讀取
<input type="file" id="fileInput"/> <script> let input = document.getElementById('fileInput'); input.addEventListener('change',(e)=>{ let reader = new FileReader(); reader.onload = ()=>{ console.log(reader.result); } reader.readAsText(input.files[0]); },false) </script>
(2).圖片讀取
<input type="file" id="fileInput"/> <script> let input = document.getElementById('fileInput'); input.addEventListener('change',(e)=>{ let reader = new FileReader(); reader.onload = ()=>{ let img = new Image(); img.src = reader.result; document.body.appendChild(img); } reader.readAsDataURL(input.files[0]); },false) </script>
二.分割檔案
(1).分割方法
let blob = file.slice(startingByte,endingByte)<body> <input type="file" id="files" name="file"/> 讀取的位元組: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="4">1-5</button> <button data-startbyte="5" data-endbyte="14">6-15</button> <button data-startbyte="6" data-endbyte="7">7-8</button> <button>整個檔案</button> </span> <div id="byteRange"></div> <div id="byteContent"></div> <script> let readBytesButtons = document.getElementsByClassName('readBytesButtons')[0], inputFiles = document.getElementById('files'); function readBlob(startByte,stopByte){ let files = inputFiles.files; if(!files.length){ alert('請選擇一個檔案'); return; } let file = files[0], start = parseInt(startByte) || 0, stop = parseInt(stopByte) || file.size - 1, byteRange = document.getElementById('byteRange'), byteContent = document.getElementById('byteContent'); let reader = new FileReader(); reader.onloadend = (e)=>{ if(e.target.readyState == FileReader.DONE){ byteRange.textContent = `Read bytes: ${start+1} - ${stop+1} of ${file.size} bytes file` byteContent.textContent = e.target.result; } } let blob = file.slice(start,stop+1); reader.readAsBinaryString(blob); } readBytesButtons.addEventListener('click',(e)=>{ if(e.target.tagName.toLowerCase() == 'button'){ let startByte = e.target.getAttribute('data-startbyte'), endByte = e.target.getAttribute('data-endbyte') readBlob(startByte,endByte) } }) </script> </body>
三.監控讀取檔案進度
<style>
#progressBar{
width: 500px;
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
opacity: 0;
transition: opacity 1s linear;
}
#progressBar.loading{
opacity: 1;
}
#progressBar .percent{
background-color: #99ccff;
height: auto;
width: 0;
}
</style>
</head>
<body>
<input type="file" id="files">
<button onclick="abortRead()">取消讀取</button>
<div id="progressBar">
<div class="percent">0%</div>
</div>
<script>
let files = document.getElementById('files'),
percent = document.getElementsByClassName('percent')[0],
progressBar = document.getElementById('progressBar'),
reader;
function updateProgress(e){
if(e.lengthComputable){
let percentLoaded = Math.round((e.loaded/e.total)*100);
if(percentLoaded < 100){
percent.style.width = percentLoaded + '%';
percent.textContent = percentLoaded + '%';
}
}
}
function errorHandler(e){
switch(e.target.error.code){
case e.target.error.NOT_FOUND_ERR:
alert('檔案未找到');
break;
case e.target.error.NOT_READABLE_ERR:
alert('檔案不可讀取');
break;
case e.target.error.ABORT_ERR:
break;
default:
alert('在讀取檔案的過程中，發生了一個錯誤')
}
}
function abortRead(){
reader.abort();
}
function handleFileSelect(e){
percent.style.width = '0%';
percent.textContent = '0%';
reader = new FileReader();
reader.onloadstart = ()=>{
progressBar.className = 'loading';
}
reader.onprogress = updateProgress;
reader.onload=(e)=>{
percent.style.width = '100%';
percent.textContent = '100%';
}
reader.onerror = errorHandler
reader.onabort = (e)=>{
alert('檔案已經取消')
}
reader.readAsDataURL(e.target.files[0]);
}
files.addEventListener('change',handleFileSelect,false)
</script>
</body>