應用場景：我要做一個圖片上傳，並且上傳完成之後將略縮圖（預覽圖）展示在頁面上。

常規思路：使用者點選圖片進行上傳，將使用者提交的圖片傳到後臺並儲存好，將圖片地址連結返回到頁面上，寫入<img>標籤的src，完成預覽。

常規思路存在的問題：1、需要進行一次前後臺互動  2、需要生成臨時檔案，那就要考慮路徑問題及臨時檔案刪除問題，這是很麻煩的。

使用base64思路：使用者點選圖片進行上傳，js獲取檔案，呼叫自帶的js方法將檔案轉為base64編碼，將編碼填入<imp>的src，完成預覽。

base64思路的優點：不需要前後臺互動，效率更高，並且base64是字串型，更易於後臺處理，編碼直接存資料庫或者再轉回檔案都可以。

bsae64DEMO：

<input type="file" name="file" id="img_upload_file" multiple="multiple"  /> 
<input type="hidden" name="img_upload_base" id="img_upload_base" />
<label>圖片預覽</label> <img id="img_upload_show" />

$("#img_upload_file").change(function() {
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);//呼叫自帶方法進行轉換
        reader.onload = function(e) {
            $("#img_upload_show").attr("src", this.result);//將轉換後的編碼存入src完成預覽
            $("#img_upload_base").val(this.result);//將轉換後的編碼儲存到input供後臺使用
        }; 
    });