如何使用jQuery ajax同时向PHP发送字符串参数与文件数据

你可以用FormData对象同时承载路由所需的字符串参数和上传文件，完全不会影响原有路由的参数读取逻辑，操作步骤如下：

1. 先获取页面中文件选择控件的文件对象，假设你的文件上传控件为：

<input type="file" id="uploadDoc" name="uploadDoc">

对应的JS获取代码：

const uploadFile = document.getElementById('uploadDoc').files[0];

2. 把原有所有参数和文件都塞入FormData实例，原有路由参数格式完全保持不变：

const postData = new FormData();
// 路由定位所需参数，和原写法完全一致
postData.append('controller', 'resource_management/language_control');
postData.append('action', 'createLanguageControl');
// 原有其他业务参数
postData.append('user', User);
postData.append('language', Language);
postData.append('course', Course);
postData.append('begin_date', BeginDate);
postData.append('end_date', EndDate);
postData.append('installments', Installments);
postData.append('monthly_amount', MonthlyAmount);
postData.append('max_reimbursement', MaxReimbursement);
postData.append('currency', Currency);
postData.append('TempDir', tempDir);
postData.append('DocName', docName);
// 添加上传文件，参数名可自定义，后端用该名称读取文件即可
postData.append('upload_file', uploadFile);

3. 修改AJAX配置，新增两个必填参数即可：

jQuery.ajax({
    type: "POST",
    url: "/app/controllers/router.php",
    data: postData,
    cache: false,
    contentType: false, // 必须设置，让浏览器自动生成带分隔符的multipart/form-data请求头
    processData: false, // 必须设置，禁止jQuery序列化FormData内容
    success: function (r) {
        // 原有成功回调逻辑不用修改
        ...
    }
});

后端适配说明 #

PHP端读取路由参数的逻辑完全不用改，还是通过$_POST['controller']、$_POST['action']获取对应值，上传的文件通过$_FILES['upload_file']读取即可，和普通表单上传文件的处理逻辑一致。

如果需要上传多个文件，循环调用postData.append('upload_file[]', 单个文件对象)即可，PHP端会自动把文件整理为数组格式。

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