<img scr="" id="upload-preview">
<input type="file" id="upload-img">
<script type="text/javascript"> 
$('#upload-img').change(function(){
    var files = this.files[0];
    if(window.FileReader){//檢測瀏覽器對FileReader的支援
        var filereader = new FileReader();
        filereader.readAsDataURL(files);//呼叫FileReader物件的方法
        filereader.onloadend = function(e){
            $('#upload-preview'
 
).attr('src',e.target.result);
        }
    }
})
</script>
//FileReader物件的方法
//FileReader 的擁有 4 個方法，其中 有3 個用來讀取檔案，另1個用來中斷讀取。
//1、abort();                 中斷讀取
//2、readAsBinaryString(file);該方法將檔案讀取為二進位制字串，通常我們將它傳送到後端，後端可以通過這段字串儲存檔案。
//3、readAsDataURL(file);    該方法將檔案讀取為一段以 data: 開頭的字串，這段字串就是 Data URL，Data URL是一種將小檔案直接嵌入文件的方案，這裡的小檔案通常是指影象與 html 等格式的檔案。
//4
 
、readAsText(file,[encoding]);將檔案以文字方式讀取，讀取的結果即是這個文字檔案中的內容。該方法有兩個引數，其中第二個引數是文字的編碼方式，預設值為 UTF-8。
​
//FileReader處理事件
//1、onabort     中斷時觸發
//2、onerror         出錯時觸發
//3、onload      檔案讀取成功完成時觸發
//4、onloadend       讀取完成觸發，無論成功或失敗
//5、onloadstart     讀取開始時觸發
//6、onprogress  讀取中