JS使用base64格式上傳檔案

<input type="file" id="fielinput" />
<img id="txshow" style="width:100px;height:100px;"/>
<br/>解析之後的base64資料：<br/>
<p id="data"></p>

/***
 * 
 * FileReader 物件允許Web應用程式非同步讀取儲存在使用者計算機上的檔案（或原始資料緩衝區）的內容，
 * 使用 File 或 Blob 物件指定要讀取的檔案或資料。

   其中File物件可以是來自使用者在一個<input>元素上選擇檔案後返回的FileList物件,
   也可以來自拖放操作生成的 DataTransfer物件,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法後返回結果

*/

/**
 * FileReader() 建構函式
 * 
 * 屬性
 *      FeileReader.error唯讀，表示讀取檔案失敗時發生的錯誤
 *      FeileReader.readyState唯讀，readyState代表數位，狀態
 *         EMPTY => 0 => 還未載入任何資料  
 *         LOADINF => 1 => 正在載入
 *         DONE => 2 => 已經全部讀取完成
 *      FeileReader.result唯讀，
 *          檔案的內容，這個屬性要在讀取完成(也就是readyState變為2時)後才有效。
 * 
 * 事件處理事件
 *      FeileReader.onabort 
 *          處理abort事件，在讀取操作中如果要中斷(終止)執行的事件
 *      FeileReader.error
 *          在讀取時如果發生錯誤時會觸發
 *      FeileReader.onload
 *          處理load事件，在讀取操作完成時觸發的(成功時若有提示框彈出成功等字樣，寫在這裡)
 *          FeileReader.onload = function(){}
 *      FeileReader.onloadStart 
 *          在開始讀取的時候觸發
 *      FeileReader.onloadEnd
 *          在讀取操作結束的時候觸發
 *      FeileReader.onProgess
 *          該事件在讀取blob時觸發
 * 
 * 方法
 *      FeileReader.abort()
 *          中止讀取操作。在返回時，readyState屬性為DONE。
 *      FeileReader.readAsArrayBuffer()
 *          開始讀取指定的Blob中的內容，一旦完成，result屬性中儲存的將是被讀取檔案的ArrayBuffer資料物件
 *      FileReader.readAsBinaryString()
 *          開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含所讀取檔案的原始二進位制資料
 *      FileReader.readAsDataURL()
 *          開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含一個data: URL格式的Base64字串表示所讀取檔案的內容
 *          1. readAsDataURL 
 *          方法會讀取指定的 Blob 或 File 物件。讀取操作完成的時候，readyState 會變成已完成DONE，並觸發 loadend 事件，
 *          同時 result 屬性將包含一個data:URL格式的字串（base64編碼）以表示所讀取檔案的內容。
 *          引數: 即將被讀取的 Blob 或 File 物件。
 *      FileReader.readAsText() 
 *          開始讀取指定的Blob中的內容，一旦完成，result屬性中將包含一個字串來表示讀取的檔案內容
 *  
 * 
 * 
 * **/
var input = document.getElementById("fielinput");
input.addEventListener('change', readFile, false);
function readFile() {
   var file = this.files[0];
    //判斷是否是圖片型別
    /*if (!/image/w+/.test(file.type)) {
     alert("只能選擇圖片");
     return false;
     }*/
    var reader = new FileReader(); // 返回一個新的FileReader函數
    reader.readAsDataURL(file);
    reader.onloadstart = function (e){ 
        console.log(e)
        console.log('開始了')
    }
    reader.onprogress = function(e){
        console.log(e)
    }
    reader.onload = function (e) {
        console.log(e);
        console.log(reader.result);
        txshow.src = this.result;
        document.getElementById("data").innerText=this.result.substring(this.result.indexOf(',')+1);
    }
    reader.onloadend = function(e){
        console.log(e)
        console.log('結束了')
    }
}

function fileFormData(files){
    console.log(this.files[0])
    console.log(files.target.files[0])
}