如何通过PHP与Ajax(XHR)将文件名传递至前端p标签？

你遇到的p标签显示undefined的问题，核心原因有两个：

1. PHP脚本存在逻辑错误，无法正确返回文件名；
2. JS代码没有正确获取PHP返回的文件名数据。

具体错误点 #

PHP部分 #

• 无效赋值：$filenamenew = $filenamenew;这行是无意义的重复赋值，应将生成的新文件名$newfilename赋值给$filenamenew；
• 脚本提前终止：echo $response; exit;会直接终止脚本执行，后续输出文件名的代码永远无法运行；
• 返回格式单一：仅返回数字状态码，无法同时传递文件名信息。

JS部分 #

• 错误获取数据：this.filenamenewText并非XMLHttpRequest对象的属性，自然会得到undefined；
• 未处理复合返回数据：原代码仅处理状态码，未解析包含文件名的返回内容。

修改后的代码 #

PHP代码（includes/upload.php） #

<?php
if(isset($_FILES['file']['name'])){
    // 获取原始文件名
    $filename = $_FILES["file"]["name"];
    // 生成带时间戳的新文件名
    $newfilename = round(microtime(true)) . '_original_' . $filename ;
    
    // 文件存储路径
    $location = '../uploads/'.$newfilename;

    // 获取并转换文件后缀为小写
    $file_extension = pathinfo($location, PATHINFO_EXTENSION);
    $file_extension = strtolower($file_extension);

    // 允许的文件扩展名
    $valid_ext = array("apk","aab","ipa");

    $response = array(
        'status' => 0,
        'filename' => ''
    );
    
    if(in_array($file_extension,$valid_ext)){
        // 上传文件到指定路径
        if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
            $response['status'] = 1;
            $response['filename'] = $newfilename;
        } 
    }

    // 以JSON格式返回状态和文件名
    echo json_encode($response);
    exit;
}
?>

HTML与JS代码 #

<div>
  <p id="filename"></p>
  <input type="file" name="file" id="file">
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>
<hr><br><br>
<script>
function uploadFile() {
    var files = document.getElementById("file").files;

    if(files.length > 0 ){
        var formData = new FormData();
        formData.append("file", files[0]);

        var xhttp = new XMLHttpRequest();

        // 设置POST请求和接口路径
        xhttp.open("POST", "includes/upload.php", true);
        // 指定返回数据类型为JSON
        xhttp.responseType = 'json';

        // 请求状态变化时的处理逻辑
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = this.response;
                // 更新p标签的文件名内容
                document.getElementById("filename").innerHTML = response.filename;
                
                var uploadBtn = document.getElementById("btn_uploadfile");
                var fileInput = document.getElementById("file");
                
                if(response.status == 1){
                    alert("上传成功。");
                    uploadBtn.value = "已上传";
                    uploadBtn.disabled = true;
                    fileInput.disabled = true;
                }else{
                    alert("文件上传失败。");
                }
            }
        };

        // 发送请求
        xhttp.send(formData);
    }else{
        alert("请选择一个文件");
    }
}
</script>

修改说明 #

1. PHP端改为返回JSON格式数据，同时包含上传状态和新文件名；
2. JS端设置responseType为json，直接解析返回的JSON对象，获取文件名并更新到p标签；
3. 修正PHP中的无效赋值和脚本终止逻辑，确保文件名能正确返回；
4. 优化JS中的变量命名，避免重复定义同一变量。

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