FormDate

主要作用：

  1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提升工作效率
  2. 异步文件上传

常用操作

  1. 新建空的FormData对象 
    let formData = new FormData();
  2. 使用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);
  3. 使用FormDate.get()对值进行读取 
    formData.get('e_time');
  4. 使用FormDate.set()对值进行设置 
    formData.set('e_time', e_time);
  5. 在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);
    }
});