如何通过单次Ajax请求上传XML与图片至PHP？双FormData方式是否正确？

开发者阿泽

2026-5-25

关于单次Ajax同时上传图片和XML文件的问题解答

嘿，我来帮你理清楚这个问题～首先直接说结论：你现在用两个FormData对象的方式是不正确的，因为单次Ajax请求只能发送一个数据体，没法同时传递两个FormData实例，浏览器根本不会识别这种写法，大概率只会忽略第二个对象，导致其中一个文件传不上去。

为什么这种方式不对？

HTTP请求的规范里，一个请求只能有一个请求体。而XMLHttpRequest的send()方法也只接受一个数据参数，如果你尝试传两个FormData对象，浏览器只会处理第一个，第二个会被直接忽略，最终只有一个文件能被PHP接收到（甚至可能都接收不到）。

正确的实现方式：用单个FormData对象承载两个文件

其实很简单，只需要创建一个FormData对象，然后把XML文件和图片文件都追加到这个对象里，再通过Ajax发送就可以了。这样既能保证单次请求，又能同时传递两个文件。

修正后的完整代码示例

HTML部分（保留你原来的结构即可）

<input type="file" class="form-control-file" name="fileToUpload" id="uploadFile"/>
<input type="file" name="imageToUpload" id="uploadImg"/>
<input type="submit" id="upload_xml" name="transcriptform" value="Upload File" class="btn btn-info">

Ajax代码（完整实现）

$('#upload_xml').on('click', function(e) {
    // 必须阻止按钮的默认提交行为，否则页面会刷新，Ajax请求会中断
    e.preventDefault();

    // 创建单个FormData对象
    const formData = new FormData();

    // 获取XML文件并添加到FormData
    const xmlFile = $('#uploadFile').prop('files')[0];
    if (xmlFile) {
        // 第一个参数是键名，对应PHP里$_FILES的键，建议和HTML的name属性保持一致
        formData.append('fileToUpload', xmlFile);
    }

    // 获取图片文件并添加到FormData
    const imageFile = $('#uploadImg').prop('files')[0];
    if (imageFile) {
        formData.append('imageToUpload', imageFile);
    }

    // 发送Ajax请求
    $.ajax({
        url: '你的PHP处理文件路径.php', // 替换成你的PHP文件路径
        type: 'POST',
        data: formData,
        // 这两个参数必须设置为false，否则jQuery会错误处理FormData
        processData: false,
        contentType: false,
        success: function(response) {
            console.log('上传成功！服务器响应:', response);
            // 这里可以添加上传成功后的页面逻辑，比如提示用户
        },
        error: function(xhr, status, error) {
            console.error('上传失败，错误信息:', error);
            // 处理上传失败的情况，比如提示用户检查文件
        }
    });
});

PHP接收文件的代码示例

<?php
// 确保服务器有uploads目录，并且有写入权限
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 接收XML文件
if (isset($_FILES['fileToUpload']) && $_FILES['fileToUpload']['error'] === UPLOAD_ERR_OK) {
    $xmlFileName = basename($_FILES['fileToUpload']['name']);
    $xmlTargetPath = $uploadDir . $xmlFileName;
    // 将临时文件移动到指定目录
    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $xmlTargetPath)) {
        echo 'XML文件上传成功！';
    } else {
        echo 'XML文件移动失败！';
    }
}

// 接收图片文件
if (isset($_FILES['imageToUpload']) && $_FILES['imageToUpload']['error'] === UPLOAD_ERR_OK) {
    $imageFileName = basename($_FILES['imageToUpload']['name']);
    $imageTargetPath = $uploadDir . $imageFileName;
    if (move_uploaded_file($_FILES['imageToUpload']['tmp_name'], $imageTargetPath)) {
        echo '图片文件上传成功！';
    } else {
        echo '图片文件移动失败！';
    }
}
?>

额外注意事项

一定要给服务器的uploads目录设置正确的写入权限（通常是0755），否则文件无法保存
可以添加文件类型验证，比如只允许.xml和图片格式（.jpg/.png等），避免恶意文件上传
如果你的表单里还有其他文本字段，也可以用formData.append('字段名', '字段值')的方式一起添加到同一个FormData对象里，不用额外处理

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