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