前端开发-文件上传，如何使用XMLHttpRequest将文件发送到后台?

xsobi 2025-01-08 18:16 11 浏览

Bash

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

Bash

<?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']);
}

xmlhttp

上一篇：Ajax异步JavaScript和XML
下一篇：用了这么长时间的xml，你懂它的格式吗

前端开发-文件上传，如何使用XMLHttpRequest将文件发送到后台?

相关推荐

HTML中的标签 html中的标签用于什么

2022年Android面试题及答案收集(不断更新中)

「猪译馆」ASFV在不同基质中的存活时间(一)

63.C# ListView控件 c#listview控件用法

同样的面试题，Android的答案和Java不一样

ESP32/8266开发环境超详细安装步骤

在C#中，文件的创建、最后访问和最后修改时间是如何存储和管理的

搞定Minio+Nextcloud分布式云盘，最难的就是目录权限问题

springboot整合mybatis使用xml实现sql语句的查询配置

史上硬核!Jar 包依赖冲突排查思路和解决方法

前端开发-文件上传，如何使用XMLHttpRequest将文件发送到后台?

微信扫一扫：分享

相关推荐

HTML中的标签 html中的标签用于什么

2022年Android面试题及答案收集(不断更新中)

「猪译馆」ASFV在不同基质中的存活时间(一)

63.C# ListView控件 c#listview控件用法

同样的面试题，Android的答案和Java不一样

ESP32/8266开发环境超详细安装步骤

在C#中，文件的创建、最后访问和最后修改时间是如何存储和管理的

搞定Minio+Nextcloud分布式云盘，最难的就是目录权限问题

springboot整合mybatis使用xml实现sql语句的查询配置

史上硬核!Jar 包依赖冲突排查思路和解决方法