<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#progress {
width: 500px;
background: #eee;
height: 30px;
text-align: center;
margin-top: 20px;
line-height: 30px;
opacity: 0;
transition: all .3s;
}
#progress.loading {
opacity: 1;
}
#progress #percent {
height: 100%;
width: 0%;
background: skyblue;
}
</style>
</head>
<body>
<input type="file" id="inputFile">
<div id="progress">
<div id="percent">0%</div>
</div>
<button id="abort">中断读取</button>
<script>
var input = document.getElementById('inputFile'),
oProgress = document.getElementById('progress'),
oPercent = document.getElementById('percent'),
oAbort = document.getElementById('abort');
var reader;
// 监听选择文件
input.addEventListener('change', handelFilesSelect, false)
oAbort.addEventListener('click', abort, false)
function handelFilesSelect(e) {
// dom初始化
oPercent.style.width = 0 + '%'
oPercent.textContent = 0 + '%'
oProgress.className = ''
// 创建读取对象
reader = new FileReader()
// 开始读取监听
reader.onloadstart = function () {
oProgress.className = 'loading'
}
// 读取进度事件
reader.onprogress = updateProgress;
// 读取完成事件
reader.onload = function () {
// 解决选择重复文件的不触发change事件的问题
e.target.value = '';
oPercent.style.width = 100 + '%'
oPercent.textContent = 100 + '%'
}
// 读取错误事件
reader.error = errorHandler;
reader.onabort=function(){
alert('文件读取已取消')
}
// 开始读取
reader.readAsBinaryString(e.target.files[0])
}
// 进度处理
function updateProgress(e) {
console.log(e);
if (e.lengthComputable) {
var percentLoaded = Math.round((e.loaded / e.total) * 100) //取整
console.log(percentLoaded);
if (percentLoaded <= 100) {
oPercent.style.width = percentLoaded + '%'
oPercent.textContent = percentLoaded + '%'
}
}
}
// 中止处理
function abort() {
reader.abort()
}
// 错误处理
function errorHandler(e) {
console.log('错误处理e',e);
var err = e.target.error
switch (err.code) {
case err.NOT_FOUND_ERR:
alert('文件未找到')
break;
case err.NOT_READABLE_ERR:
alert('文件不可读取')
break;
case err.ABORT_ERR:
alert('文件读取终止')
break;
default:
alert('在读取过程中发生错误')
break;
}
}
</script>
</body>
</html>
