Javascript：FormDate和FileReader

FormDate

主要作用：

2. 将form表單元素的name與value進行組合，實作表單資料的序列化，進而減少表單元素的拼接，提升工作效率
3. 異步檔案上傳

常用操作

2. 建立空的FormData對象​

   ​let formData = new FormData(); ​

   ​
3. 使用FormDate.append添加鍵值對​

   ​formData.append('id', id); formData.append('image_title', image_title); formData.append('image_url', image_url); formData.append('image_link', image_link); formData.append('s_time', s_time); formData.append('e_time', e_time); ​

   ​
4. 使用FormDate.get()對值進行讀取​

   ​formData.get('e_time'); ​

   ​
5. 使用FormDate.set()對值進行設定​

   ​formData.set('e_time', e_time); ​

   ​
6. 在form表單中，送出資料的時候，格式化form表單資料​

   ​$('form').on('submit', function () { $.ajax({ url: $(this).attr('action'), type:$(this).attr('method'), data: new FormData($(this)[0]), processData: false, contentType: false, success: function (data) { console.log(data); if(data.status === 200){ // 添加成功 alert('輪播圖添加成功!'); window.location.href = '/back/s_list' }else { alert('輪播圖添加失敗!'); } } }); // 阻止預設送出的事件 return false; }); ​

   ​ 在資料的位置，直接通過​

   ​new FormData(Form表單)​

   ​構造資料

FileReader

主要作用

案例：當file類型的input檔案變動時，動态改變圖檔路徑

$('#upfile').on('change', function () {
    // 2.2.1 擷取使用者上傳的圖檔檔案
    // console.log($(this).get(0).files[0]);
    let file = $(this).get(0).files[0];

    // 2.2.2 讀取這個檔案
    let reader = new FileReader();
    if (file) {
        reader.readAsDataURL(file);
    }

    // 2.2.3 監聽檔案是否讀取完畢
    reader.onloadend = () => {
        $('#image_url').attr('src', reader.result);
    }
});