顾乔芝士网

 
  


<script>
{
  const fileInput = document.getElementById('fileInput')

  fileInput.accept = 'image/*'
  fileInput.onchange = () => {
    const file = fileInput.files[0]
    const formData = new FormData()
    const xhr = new XMLHttpRequest()

    formData.append('img', file)

    xhr.open('POST', 'http://localhost/upload.php', true)
    xhr.send(formData)
    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4)
        return

      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText)
        const img = new Image()
        img.src = data.url
        document.body.appendChild(img)
      } else {
        alert('文件上传失败： ' + xhr.status)
      }
    }
  }
}
</script>

当使用

原 作 者：Craig Buckler

原文链接：
https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/