原生ajax结合formData上传图片

最新推荐文章于 2024-09-16 21:59:57 发布

原创最新推荐文章于 2024-09-16 21:59:57 发布 · 783 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #formData

ajax 专栏收录该内容

6 篇文章

订阅专栏

博客涉及HTML和JS部分，标签提及Ajax和FormData。Ajax用于异步数据交互，FormData可方便表单数据处理，在前端开发中能提升用户体验和数据传输效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<form>
    <input type="file" id="file">
</form>
<div class="img_box">
    <img src="" alt="">
</div>

js部分：

// 上传图片
  var file = document.querySelector('#file')
// 触发input框的change事件
  file.onchange = function() {
    var xhr = new XMLHttpRequest()
    // 创建了一个空的formData
    var formData = new FormData()
    // 文件
    formData.append('pic1', file.files[0])
    // post请求 接口：'/category/addSecondCategoryPic'
    xhr.open('post', '/category/addSecondCategoryPic')
    xhr.send(formData)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var result = JSON.parse(xhr.responseText)
        // 让图片显示到对应的img标签中去
        document.querySelector('.img_box img').src = result.picAddr
      }
    }
  }