今天要來實作一個簡單的圖片預覽器，須求如下：
- 選擇檔案後，如果是可顯示的圖片檔，會在下面的"圖片預覽"顯示出圖片。
- 如果沒有選擇檔案(例如取消了檔案選取)，則"圖片預覽"的圖片會被清掉。
- 為了簡單起見，這裡不檢查file來源是不是圖片檔。
程式實作如下：
說明：
- FileReader.readAsDataURL(source)可以輸入file source並得到一串當下可用的URL，
型式為 dtat:..........，存在FileReader.result中
還有其他的read函式可用，例如：
readAsArrayBuffer()、readAsBinaryString()、readAsText() - FileReader在讀取完後會觸發load事件，還有其他的事件可用，例如：
onabort：當讀取操作被中止時調用.
onerror：當讀取操作發生錯誤時調用.
onload：當讀取操作成功完成時調用.
onloadend：當讀取操作完成時調用,不管是成功還是失敗.該處理程序在onload或者onerror之后调用.
onloadstart：當讀取操作將要開始之前調用.
onprogress：在讀取數據過程中周期性調用. - FileReader：
FileReader.readyState代表資料的讀取狀態，總共有三個值：
FileReader.EMPTY = 0：還沒有加載任何數據.
FileReader.LOADING = 1：數據正在被加載.
FileReader.DONE = 2：已完成全部的讀取請求.
源碼(怕JsFiddle有問題)：
html:
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型式，在讀取完後觸發load
//事件，URL存在FileReader.result中
fileReader.readAsDataURL(this.files[0]);
}else{
//沒有選取file時，例如選擇取消，
//將![]()
的src設成""
imageView.src = "";
}
}, false);
//fileReader讀取完file資料後會觸發load事件
fileReader.addEventListener("load", function(event) {
//讀取後設定![]()
的src
imageView.src = this.result;
}, false);
--------------------------------------------------------------------------------------------------
另做了一個讀取 video 檔案長度 (秒數) 的範例，程式碼基本上差不多，只是改成把readAsDataURL() 得到的 src 設定在 <video> 上：
HTML :
<div>Choose a browser supported video file to load video duration.</div> <input id="fileUploader" type="file" /> <div>Video length : <span id="videoLengthDisplayer"></span> (s)</div>
JS :
var fileUploader = document.getElementById("fileUploader");
var videoLengthDisplayer = document.getElementById("videoLengthDisplayer");
//用來讀取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{
}
}, false);
fileReader.addEventListener("load", function(event) {
var video = document.createElement('video');
video.src = this.result;
video.load();
video.addEventListener("loadeddata", function(){
videoLengthDisplayer.innerHTML = video.duration;
});
}, false);
參考資料：
