如何通过Ajax提交文件并在PHP页面读取文件内容

已查阅多篇Stack Overflow帖子，实现了部分功能但卡在最后一步：通过Ajax提交文件（避免页面刷新），在PHP文件中处理并展示文件内容，但PHP无法获取文件内容，尽管开发者控制台能看到存储内容的变量。

核心目标：

• 加载带文件提交表单的PHP页面
• 提交表单后不刷新页面
• 在同一页面处理并展示提交的数据（如内容表格）

用户原始代码 #

loadData.php

<b>ARQUIVO</b><br>
<form id="formEnvioArquivos">
    <input id="arquivo" name="blobFile" type="file"> 
    <input type="button" id="submitFormData" onclick="enviaDadosForm()" value="Submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function enviaDadosForm()
{
    var myFile = $('#arquivo').prop('files')[0];
    var fileReader = new FileReader();
    fileReader.onLoad = function () {
        var final = fileReader.result;
    }
    fileReader.readAsText(myFile);
 
    var fd = new FormData(document.querySelector('#formEnvioArquivos'));
    $.ajax ({
        url: 'submit.php',
        method: 'POST',
        data: {'fileContent' : fileReader.result},
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(myFile);
            console.log(fileReader.result);
        }
    });
}
</script>

submit.php

<?php
echo 'FROM PHP: ', $_POST['arquivo'];
echo 'FROM PHP: ', $_FILES['arquivo']['tmp_name'];
?>

你的代码存在两个核心问题：

1. FileReader异步逻辑错误：FileReader.readAsText是异步操作，你在调用后立刻发起Ajax请求，此时fileReader.result还未生成，导致传给PHP的是undefined。
2. 参数名不匹配：前端传递的参数是fileContent，但PHP中却尝试读取$_POST['arquivo']和$_FILES['arquivo']，完全对应不上。

修正后的代码 #

loadData.php

<b>ARQUIVO</b><br>
<form id="formEnvioArquivos">
    <input id="arquivo" name="blobFile" type="file"> 
    <input type="button" id="submitFormData" onclick="enviaDadosForm()" value="Submit" />
</form>
<!-- 新增一个容器用于展示处理后的结果 -->
<div id="resultContainer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function enviaDadosForm() {
    var myFile = $('#arquivo').prop('files')[0];
    // 先判断是否选择了文件
    if (!myFile) {
        alert('请先选择要上传的文件');
        return;
    }

    var fileReader = new FileReader();
    // 注意是小写的onload，原代码的onLoad不会触发回调
    fileReader.onload = function () {
        // 必须在异步读取完成后再发起Ajax请求
        $.ajax({
            url: 'submit.php',
            method: 'POST',
            data: { 'fileContent': fileReader.result },
            // 传递普通文本无需设置processData和contentType为false
            success: function (data) {
                console.log('PHP返回结果:', data);
                // 将处理后的结果展示到页面容器中
                $('#resultContainer').html(data);
            },
            error: function(xhr) {
                console.error('请求失败:', xhr.responseText);
            }
        });
    }
    fileReader.readAsText(myFile);
}
</script>

submit.php

<?php
// 匹配前端传递的参数名fileContent
if (isset($_POST['fileContent'])) {
    $fileContent = $_POST['fileContent'];
    echo '<h3>文件内容处理结果</h3>';
    // 示例：将文本按行拆分生成表格（假设是CSV格式，可根据实际调整分隔符）
    $lines = explode("\n", trim($fileContent));
    echo '<table border="1" cellpadding="8">';
    foreach ($lines as $line) {
        $cells = explode(",", $line);
        echo '<tr>';
        foreach ($cells as $cell) {
            // 使用htmlspecialchars避免XSS风险
            echo '<td>' . htmlspecialchars(trim($cell)) . '</td>';
        }
        echo '</tr>';
    }
    echo '</table>';
} else {
    echo '未接收到文件内容';
}
?>

• 必须在fileReader.onload回调内发起Ajax请求，确保文件内容已读取完成。
• 前后端参数名必须严格一致，避免出现接收不到数据的情况。
• 如果需要上传文件本身而非读取后的文本，可直接使用FormData提交，但你的需求是传递文件内容，直接传文本更高效。

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