新手开发者求助：如何通过JavaScript的GET方法获取服务器上刚解压的文件数据

你现在的核心问题是前端不知道刚解压出来的文件叫什么、路径是什么——毕竟ZIP里可能有多个文件，甚至嵌套目录，前端没法凭空猜测。所以第一步得让你的PHP后端（stash.php）在完成解压后，把解压后的文件列表返回给前端，这样前端就能精准发起GET请求了。

下面分步骤给你修改方案：

1. 先修改后端PHP（stash.php），返回解压后的文件信息 #

在你的PHP代码完成ZIP解压的逻辑之后，添加一段代码，遍历解压后的文件，把它们的路径/名称以JSON格式返回给前端。

示例PHP代码修改： #

// 假设你已经完成了解压操作，这里以解压到upload目录下的唯一子目录为例（避免多用户上传冲突）
// 先创建一个唯一的子目录（用时间戳+随机字符串，防止重名）
$uniqueSubDir = uniqid('zip_', true);
$targetDir = 'upload/' . $uniqueSubDir . '/';
mkdir($targetDir, 0755, true); // 创建目录，权限按需调整

// 这里是你原来的解压代码，把ZIP文件解压到$targetDir里
// 比如用ZipArchive类的代码...

// 遍历解压后的文件，过滤掉.和..
$files = scandir($targetDir);
$validFiles = array_filter($files, function($file) {
    return $file !== '.' && $file !== '..';
});

// 以JSON格式返回子目录路径和文件列表
header('Content-Type: application/json');
echo json_encode([
    'subDir' => $uniqueSubDir,
    'files' => $validFiles
]);
exit; // 确保只返回这个JSON，不输出其他内容

2. 修改前端JavaScript，获取文件清单并发起GET请求 #

现在前端在POST上传成功后，就能拿到后端返回的文件列表，然后逐个请求每个文件的数据。同时我帮你清理了代码里重复的变量定义，优化了逻辑：

优化后的JS代码： #

// 去掉重复的form变量定义
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
    var oOutput = document.querySelector("div");
    var oData = new FormData(form);
    oData.append("CustomField", oData.get("file"));

    oReq = new XMLHttpRequest();
    oReq.open("POST", "stash.php", true);
    oReq.onload = function(oEvent) {
        if (oReq.status == 200) {
            // 解析后端返回的JSON数据
            const response = JSON.parse(oReq.responseText);
            const subDir = response.subDir;
            const fileList = response.files;

            // 遍历每个文件，发起GET请求获取数据
            fileList.forEach(fileName => {
                const xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        // 这里处理文件数据：
                        // 如果是文本文件，用this.responseText；二进制文件可以设置responseType为'blob'
                        console.log(`成功获取文件 ${fileName} 的数据：`, this.responseText);
                        // 如果你需要处理XML格式的文件，再调用myFunction
                        // myFunction(this);
                    }
                };
                // 拼接完整的文件URL：upload/子目录/文件名
                xhttp.open("GET", `upload/${subDir}/${fileName}`, true);
                // 如果是二进制文件（比如图片、音频），打开下面这行
                // xhttp.responseType = 'blob';
                xhttp.send();
            });
        } else {
            oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br/>";
        }
    };
    oReq.send(oData);
    ev.preventDefault();
}, false);

function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    console.log(xmlDoc);
};

几个关键注意事项： #

• 避免文件冲突：用唯一子目录存放每个用户上传解压的文件，不然多个用户上传后，upload目录会混乱，前端也会拿到不属于当前上传的文件。
• 文件类型适配：如果解压后的是二进制文件（比如图片），记得给XMLHttpRequest设置responseType = 'blob'，才能正确获取二进制数据。
• 权限问题：确保服务器上的upload目录和子目录有足够的读写权限，不然PHP无法创建目录、解压文件，前端也无法GET到文件。

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