一、前言
有些網站在上傳資料的時候，可以在上傳前預覽圖片。去看連線資料，居然也沒有ajax的痕跡?到底是怎麼做的呢?簡單來說，當你選擇了某張圖片，瀏覽器其實已經有該圖片的資訊了。
網址 :
https://docs.google.com/document/d/1J7T3rP3DgPB2WCYe2T_uhRCJkTKtd4-AJjdWSvPd-BE/pub

預覽上傳圖片
一、前言

有些網站在上傳資料的時候，可以在上傳前預覽圖片。去看連線資料，居然也沒有ajax的痕跡?到底是怎麼做的呢?簡單來說，當你選擇了某張圖片，瀏覽器其實已經有該圖片的資訊了。
二、files屬性

當input type=”file”你放上圖片的時候，該元素的files屬性是一個陣列，會有你選擇圖片的資料。

$("img").change(function(){
        console.log(this.files) ;
});

三、FileReader物件

另外html5有一個FileReader。IE的部分在IE10之後也有支援了。
只要把該檔案傳給這個物件，我們就可以得到他的dataURL了(也算是base64編碼)

$("#img").change(function(){
        if (this.files && this.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                        $('#blah').attr('src', e.target.result);
                }
                
                reader.readAsDataURL(this.files[0]);
        }
});

其中的 e.target.result 會是下面的格式
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD/7gAOQWRvYmUAZAAAAAAB/+ETXUV4aWYAAE1NACoAAAAIAAcBMgACAAAAFAAAAGIBOwACAAAAB...........未完

四、DEMO
http://jsfiddle.net/sheephead0818/g7kydnd4/