html將圖片讀取為base64格式預覽並傳到伺服器

qq_33474742發表於2018-05-26
HTML伺服器
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#preview{
			width: 400px;
			height: 360px;
			border: solid 1px rgba(0,0,0,.1);
			border-radius: 5px;
		}
	</style>
</head>
<body>
	<input type="file" name="" onchange="handleSelected()">
	<img id="preview" src="" width="100%" height="100%"/>
	<script type="text/javascript">
		function handleSelected(){
			/**得到FileList的第一個元素，也就是上傳的圖片**/
			var e = window.event || arguments[0];
     		let file = e.target.files[0];
     		console.log(file)
    		/**建立一個FileReader例項，用來讀取檔案**/
     		let reader = new FileReader();
    		/**成功讀取之後將圖片顯示出來**/
	    	reader.onload = function(e){
	       		let image = document.getElementById('preview');
	       		image.src = e.target.result;
	       		image.onload = function (){
	       			console.log(e.target.result)
	        		console.log('圖片載入出來了...')
	       		}
	     	}
	     	reader.readAsDataURL(file);
	     }

	</script>
</body>
</html>
執行截圖：

相關文章