<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5上传</title>
<style>
div{padding:20px;}
</style>
</head>
<body>
<input type="file" id="file" multiple />
<div id="details"></div>
<button onclick="showFile()">提交</button>
<div><progress id="Progress" value="0" max="100" /></div>
<script type="text/javascript">
function showFile () {
var files,item,len,i,filename,filesize,type,dstr;
var details = document.getElementById("details");
files = document.getElementById("file").files;
// console.log(files);
for(i=0, len=files.length; i<len; i++){
var s='';
var oSpan = document.createElement("span");
// console.log(oSpan)
oSpan.innerHTML = (i+1)+'.->'+files[i].name+'文件大小：' + files[i].size;
details.appendChild(oSpan);
getFile(files[i]);
}
}
//通过filereader接口获取文件
function getFile(file){
if(FileReader){
var start = 0,end = 0,length = 1000;
var fr = new FileReader();
// fr.readAsText(file,[encoding]);//默认是utf-8编码
// fr.readAsBinaryString(file); //二进制读取
var readBlob = function(file,start,end){
// alert(1)
if(file.webkitSlice){
var blob = file.webkitSlice(start, end);
}else if(file.mozSlice){
var blob = file.mozSlice(start, end);
}else{
var blob = file.slice(start, end);
}
fr.readAsDataURL(blob);
};
readBlob(file, start, end);
// 读取中断的时候触发
fr.onabort = function(){
};
// 出错时触发
fr.onerror = function(){
};
//读取成功时触发
fr.onload = function(e){
if(end == file.size) return;
console.log(file.name,start,end);
var head = end;
end = (start + length) > file.size ? (file.size) : (start + length);
start = head;
readBlob(file, start, end);
};
// 读取完成是触发，无论成功还是失败
fr.onloadend = function(){
};
// 开始读取的时候触发
fr.onloadstart = function(file,start,end){
};
// 读取过程中触发
fr.onprogress = function(e){
var pro = document.getElementById("Progress"),
percent = end/file.size;
console.log(e,percent)
// console.log(e)
// console.log(e.loaded);
};
}else{
alert("Your browser doesn't support FileReader");
}
}
</script>
</body>
</html>