FileReader的練習

使用FileReader讀取圖片並實現

by hugogo7646

HTML

<input id="fileUploader" type="file" />
<div>圖片預覽：</div>
<img id="imageView" src="" style="width:200px; height200px;" />

JavaScript

var fileUploader = document.getElementById("fileUploader");
var imageView = document.getElementById("imageView");
//用來讀取file資料的FileReader
var fileReader = new FileReader();

//監控#fileUploader的值變化
fileUploader.addEventListener("change", function(event) {
  if (this.files.length > 0) {
  	//有選取file時，使用fileReader讀取file資料
    //readAsDataURL可以將讀取到的file資料轉成
		//data:......的URL型式
    fileReader.readAsDataURL(this.files[0]);
  }else{
  	//沒有選取file時，例如選擇取消，
    //將<img>的src設成""
  	imageView.src = "";
  }
}, false);

fileReader.addEventListener("load", function(event) {
	//讀取後設定<img>的src
  imageView.src = this.result;
}, false);