HTML5 文件上傳

時間 2019-11-17

標籤 html5 html 文件上傳欄目 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>