HTML5 文件上传

<!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>

  

posted @ 2018-03-27 16:09  幽竹小妖  阅读(2185)  评论(0编辑  收藏  举报