图片上传API

时间：2023-6-3 23:35 作者：小诸葛 分类： 前端 正在检查是否收录...

前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传示例</title>
</head>
<body>
  <form>
    <input type="file" id="fileInput">
    <button type="button" onclick="upload()">上传</button>
  </form>
  <script>
    function upload() {
      var fileInput = document.getElementById("fileInput");
      var file = fileInput.files[0];
      var ajax = new XMLHttpRequest();
      var url = "http://home.v6g.cn/upload.php";
      ajax.open("POST", url, true);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          // 请求成功，在此处理返回的数据
           var responseJson = JSON.parse(ajax.responseText);
    console.log(responseJson); 
        }
      };
      var formData = new FormData();
      formData.append("file", file);
      ajax.send(formData);
    }

  </script>
</body>
</html>

后端代码

<?php
header("Content-Type:text/html;charset=UTF-8");
header('Access-Control-Allow-Origin: *'); // 允许跨域访问
header('Access-Control-Allow-Methods: POST'); // 允许POST请求
header('Access-Control-Allow-Headers: Content-Type'); // 允许数据类型为JSON
if ($_FILES["file"]["error"] > 0) {
    // 如果文件上传错误，返回错误信息
    echo json_encode(array('code' => -1, 'msg' => '上传失败：' . $_FILES["file"]["error"]));
} else {
    // 将上传的文件移动到指定位置
    $uploadDir = "./uploads/";
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    $fileName = md5(time() . rand()) . '.' . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
    $uploadPath = "./uploads/" . $fileName;
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $uploadPath)) {
        // 获取上传文件信息
        $fileSize = filesize($uploadPath);
        $fileUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/uploads/' . $fileName;
        $fileTime = date('Y-m-d H:i:s', filemtime($uploadPath));
        // 返回上传成功后的文件地址和信息
        $response = array(
            'code' => 0,
            'msg' => '上传成功',
            'data' => array(
                'src' => $fileUrl,
                'name' => $fileName,
                'size' => $fileSize,
                'time' => $fileTime
            )
        );
        echo json_encode($response);
    } else {
        echo json_encode(array('code' => -2, 'msg' => '上传失败'));
    }
}
?>

使用方法：

1. 根目录创建 文件夹 uploads 用于存放图片
2. 创建 upload.php 放入后端代码
3. 创建 index.html 存放前端代码
4. 访问前端代码 上传图片，打开控制台，即可看到返回结果

图片上传API

版权说明

扫描二维码，在手机上阅读