如何使用JavaScript将文件上传到指定FTP服务器？

核心问题原因 #

• 浏览器端原生JavaScript 没有内置FtpConnection这个API，你看到的相关代码要么是特定运行环境（比如Node.js服务端）的API，要么是错误的无效示例，所以会直接报未定义错误。
• 浏览器出于安全沙盒限制，本身就禁止前端JavaScript直接发起FTP协议连接：FTP是明文传输账号密码的协议，一旦前端写死FTP账号密码，所有访问页面的用户都能直接拿到明文凭证，可随意操作你的FTP服务器，风险极高。
• FileZilla是本地原生桌面客户端，不受浏览器安全策略限制，因此可以直接发起FTP连接。

可行的实现方案 #

你已经有目标目录的公网HTTP访问地址，最稳妥、最符合Web开发规范的方案是加一个简单的后端上传接口，流程如下：

1. 在你的https://nameofsite/站点下新增一个后端上传接口，接口权限做简单校验后，直接把前端上传的文件写入到targetdir目录即可。
2. 前端直接用原生fetch/XMLHttpRequest把文件通过FormData传给后端接口即可，不需要处理FTP逻辑，也不会暴露敏感凭证。

前端示例代码 #

<input id="fileForUpload" type="file" onchange="upload()">
<div id="status"></div>
  
<script>
async function upload() {
    const file = document.getElementById("fileForUpload").files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append('uploadFile', file);
    formData.append('saveName', '1.html'); // 要保存的文件名
    try {
        const res = await fetch('https://nameofsite/upload.php', {
            method: 'POST',
            body: formData
        });
        if (res.ok) {
            document.getElementById('status').innerText = '上传成功，访问地址：https://nameofsite/targetdir/1.html';
        }
    } catch (e) {
        document.getElementById('status').innerText = '上传失败：' + e.message;
    }
}
</script>

最简PHP后端示例（upload.php） #

<?php
// 简单的校验逻辑可自行添加，比如密钥校验
$saveDir = __DIR__ . '/targetdir/';
$saveName = $_POST['saveName'];
$uploadFile = $_FILES['uploadFile']['tmp_name'];
if (move_uploaded_file($uploadFile, $saveDir . $saveName)) {
    http_response_code(200);
    echo 'success';
} else {
    http_response_code(500);
    echo 'fail';
}
?>

不推荐的替代方案 #

如果你坚持要直接通过FTP上传，只能选择以下两种方案，但都存在明显缺陷：

• 用Node.js写本地执行的脚本，用FTP相关第三方包实现上传，无法在浏览器端运行。
• 用第三方前端FTP库，依赖FTP over WebSocket，需要FTP服务器额外支持WebSocket代理，同时账号密码会明文暴露在前端代码中，安全风险极高。

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