一石二鸟：实现同时上传文件和表单json数据的解决方案

2023-11-22 02:37:52

在现代网络应用中，如何实现文件与 JSON 数据的同步提交

在当今网络应用开发中，表单提交是不可或缺的一环。随着业务逻辑的复杂化，提交数据的种类越来越多，元素也愈发多样化。其中，一个普遍的需求是实现同时上传文件和表单 JSON 数据。

前言：为何需要同步提交？

在某些场景下，应用程序需要收集用户的文本输入和文件，例如提交带有个人资料图片的注册表单，上传带有附件的工单，或提交包含图像和其他数据的复杂业务表单。为了获得这些多类型的数据，需要同步提交机制。

一、FormData 方法

1. 前端

<form id="myForm" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="file" name="avatar">
    <input type="submit">
</form>

$('#myForm').submit((e) => {
    e.preventDefault();

    const formData = new FormData(e.target);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false,
        success: (data) => {
            // 上传成功
        },
        error: (err) => {
            // 上传失败
        }
    });
});

2. 后端

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 获取文件上传信息
    $file = $_FILES['avatar'];

    // 获取表单数据
    $name = $_POST['name'];

    // 执行文件上传操作

    // 执行表单数据处理操作
}

二、XMLHttpRequest（XHR）方法

1. 前端

<form id="myForm">
    <input type="text" name="name">
    <input type="file" name="avatar">
    <input type="submit">
</form>

$('#myForm').submit((e) => {
    e.preventDefault();

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.setRequestHeader('Content-Type', 'multipart/form-data');

    const formData = new FormData(e.target);
    xhr.send(formData);

    xhr.onload = () => {
        if (xhr.status === 200) {
            // 上传成功
        } else {
            // 上传失败
        }
    };
});

2. 后端

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 获取文件上传信息
    $file = $_FILES['avatar'];

    // 获取表单数据
    $name = $_POST['name'];

    // 执行文件上传操作

    // 执行表单数据处理操作
}