可锐资源网

<form> 
  <input type="file" id="fileInput">
</form>

<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>

<?php
// 后端php代码
header('Access-Control-Allow-Origin: *');

$img = $_FILES['img'];

if (is_uploaded_file($img['tmp_name'])) {
  move_uploaded_file($img['tmp_name'], './'.$img['name']);
  echo json_encode(['url' => 'http://localhost/'.$img['name']]);
} else {
  echo json_encode(['err' => 'upload image error']);
}