ajax 提交form表单 到服务器

预览图片

1.给文件选择框注册 change1事件
2.获取文件信息 根据 files
3. 借助 URL.createObjectURL() 生成url地址
4. 将生成的url地址赋值给 img 标签的src属性

document.querySelector(`#heroIcon`).
addEventListener(`change`, function () {
  console.log(this);
  const file = this.files[0]
  const img = URL.createObjectURL(file)
  document.querySelector(`.preview`).src = img
})

提交form表单

1.找到form 注册 sbumit事件
2.阻止表单默认行为
3. 收集表单数据
4. 发送ajax
 

  const form = document.querySelector(`form`)
  form.addEventListener(`submit`, function (e) {
    e.preventDefault()
    const fd = new FormData(form)
    console.log(...fd);
    axios({
      method: 'post',
      url: '/cq/add',
      data: { fd }, // 请求体参数
    }).then(({ data: res }) => {
      // 判断业务状态码是否为 0
      console.log(res);
    });
  })