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])
}