iOS设备使用PHP/JavaScript上传图片至服务器失败求助

问题描述 #

我用PHP+JavaScript实现的图片上传功能，桌面端可正常将图片上传至目标文件夹，但在iPhone（iOS系统）操作后，目标文件夹始终为空，功能完全失效，求排查方向和解决办法。

现有代码 #

PHP后端代码（upload.php） #

<?php
error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);
@ini_set('html_errors','0');
@ini_set('display_errors','0');
@ini_set('display_startup_errors','0');
@ini_set('log_errors','0');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $uploadDir = '../myimg/'; // 目标文件夹

    if (!file_exists($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }

    $uploadedFile = $uploadDir . basename($_FILES['image']['name']);

    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadedFile)) {
        echo 'Image uploaded successfully: ' . $uploadedFile;
    } else {
        echo 'Error uploading image.';
    }
}
?>

JavaScript前端代码 #

function uploadImage() {
  var formData = new FormData();
  var fileInput = document.getElementById('imageInput');

  if (fileInput.files.length > 0) {
    formData.append('image', fileInput.files[0]);

    var xhr = new XMLHttpRequest();

    xhr.open('POST', '../common/upload.php', true);

    xhr.onload = function() {
      if (xhr.status === 200) {
        document.getElementById('result').innerHTML = xhr.responseText;
      } else {
        document.getElementById('result').innerHTML = 'Error uploading image.';
      }
    };

    xhr.send(formData);
  } else {
    document.getElementById('result').innerHTML = 'Please select an image.';
  }
}

排查方向与解决办法 #

1. 开启错误提示，定位具体问题 #

当前PHP代码屏蔽了所有错误输出，无法得知上传失败的真实原因。临时修改代码开启错误显示：

// 注释掉屏蔽错误的代码
// @ini_set('html_errors','0');
// @ini_set('display_errors','0');
// @ini_set('display_startup_errors','0');
// @ini_set('log_errors','0');

// 改为开启显示
ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');

同时在PHP中打印上传错误码，替换原有错误输出逻辑：

if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadedFile)) {
    echo 'Image uploaded successfully: ' . $uploadedFile;
} else {
    // 打印具体错误码，对应含义：0=无错误，1=超php.ini大小限制，2=超表单大小限制，3=文件仅部分上传，4=未选文件，6=临时文件夹缺失，7=写入磁盘失败
    echo 'Error code: ' . $_FILES['image']['error'];
}

在iOS端测试上传，即可通过错误码快速定位问题。

2. 处理iOS图片文件名特殊字符问题 #

iOS拍照生成的图片文件名可能包含中文、空格或特殊符号，basename()函数处理时易出错，建议生成随机文件名替代原文件名：

// 获取文件扩展名
$ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
// 生成唯一随机文件名
$fileName = uniqid() . '.' . $ext;
$uploadedFile = $uploadDir . $fileName;

3. 调整PHP上传配置限制 #

iOS拍摄的照片体积通常较大，默认PHP配置可能限制了上传大小，修改php.ini参数：

upload_max_filesize = 20M
post_max_size = 25M
max_execution_time = 300

修改后重启PHP服务，确保大文件能正常上传。

4. 修正路径与权限问题 #

相对路径../myimg/可能因移动端页面层级不同解析错误，改用绝对路径更可靠：

// 基于网站根目录的绝对路径
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . '/myimg/';

另外，mkdir生成的文件夹权限可能因系统umask设置被削减，创建后手动设置权限：

if (!file_exists($uploadDir)) {
    mkdir($uploadDir, 0777, true);
    chmod($uploadDir, 0777); // 确保写入权限足够
}

5. 优化前端兼容性处理 #

iOS部分版本对FormData的处理存在差异，增加错误捕获和文件类型校验：

function uploadImage() {
  var formData = new FormData();
  var fileInput = document.getElementById('imageInput');

  if (fileInput.files.length > 0) {
    var file = fileInput.files[0];
    // 校验文件类型为图片
    if (!file.type.startsWith('image/')) {
      document.getElementById('result').innerHTML = '请选择图片文件';
      return;
    }
    formData.append('image', file);

    var xhr = new XMLHttpRequest();

    xhr.open('POST', '../common/upload.php', true);

    xhr.onload = function() {
      if (xhr.status === 200) {
        document.getElementById('result').innerHTML = xhr.responseText;
      } else {
        document.getElementById('result').innerHTML = '上传失败，状态码：' + xhr.status;
      }
    };

    // 捕获网络连接错误
    xhr.onerror = function() {
      document.getElementById('result').innerHTML = '网络连接错误';
    };

    xhr.send(formData);
  } else {
    document.getElementById('result').innerHTML = '请选择一张图片';
  }
}

内容的提问来源于stack exchange，提问作者apex anchor