file 選擇圖片後預覽

圖片上傳預覽是比較常見的需求，以前的做法，是在旁邊隱藏一個 <img> 標籤，然後給 file 標籤加個事件，當用戶選擇文件之後，獲得文件物理路徑（文件絕對路徑），然後賦值給<img> 標籤的 src 屬性。

但是現代瀏覽器中，出於安全考慮，file 標籤已經限制 js 獲得文件的絕對路徑（以及其他的一些訪問本地文件的權限）。當然，既然用戶有需求，瀏覽器就不會平白無故的只限制，而不提供相應的解決方案。現代瀏覽器中，我們可以用 FileReader 來實現圖片預覽，原理是將 file 轉爲 dataURL(也有說Base64)，然後賦值給 img 的 src 屬性。注意該對象所有方法都沒有返回值，結果存在對象的 result 屬性中！，這是瀏覽器中新的一個內置對象，至於兼容性，只能很抱歉的說，自行測試吧。。。

不過我相信，如果瀏覽器不能獲得 file 的絕對路徑，那它肯定得實現些相應的東西來解決用戶需求（雖然這只是我個人一廂情願的 YY）。具體怎麼樣還有待深入研究，現在的我，僅僅只是知道可以這麼做。確實很菜逼，如果有大神路過，煩請指點，感激不盡！！！

下面上代碼：

/**
 * 高版本瀏覽器圖片預覽
 * @param {domNode/string} node 
 */
function fileReader(node, imgNode){
	
	if(node == null || imgNode == null) {
		console.log("請傳入合理參數");
		return;
	}
	
	node = typeof node == "string" ? document.getElementById(node) : node;
	imgNode = typeof imgNode == "string" ? document.getElementById(imgNode) : imgNode;
	
	if(typeof FileReader == 'undefined'){
		console.log("瀏覽器版本較低，不支持FileReader");
		var src = node.value;
		imgNode.src = src;
	}else {
	
		// 獲得文件
		var file = node.files[0];
		
		var reader = new FileReader();
		
		// 將文件讀取爲DataUrl
		reader.readAsDataURL(file);
		
		reader.onload = function(event) {
			imgNode.src = this.result;
		}
		
		reader.onerror = function(event){
			throw new Error("讀取出錯");
		}
		
		reader.onloadstart = function() {
			console.log("讀取開始");
		}
	}
}