为何通过Ajax发送File对象数组安全，常规HTTP请求却不可行？

嘿，我来帮你搞定这个文件上传的需求，顺便解答你那个安全性的疑问～

首先，咱们要做的是在原生表单基础上，加上客户端的文件添加/删除功能，同时保持常规表单提交的逻辑（页面跳转、服务端处理后重定向/转发）。这里的关键是在客户端维护用户最终要上传的文件列表，然后在提交时把这些文件正确传递给服务端，同时不用改服务端代码。

1. 基础HTML结构 #

先搭好表单框架，注意必须加enctype="multipart/form-data"才能上传文件。我们用一个隐藏的文件选择框来触发文件选择，再加上显示已选文件的区域和操作按钮：

<form id="fileUploadForm" action="/upload" method="post" enctype="multipart/form-data">
  <!-- 隐藏的文件选择框，用来触发文件选择（避免默认样式不好看） -->
  <input type="file" id="hiddenFileInput" multiple style="display: none">
  
  <!-- 用来显示已选文件的列表 -->
  <div id="fileList" class="file-list"></div>
  
  <!-- 操作按钮 -->
  <button type="button" id="addFileBtn">添加文件</button>
  <button type="submit">提交上传</button>
</form>

2. 客户端JS实现增删逻辑 #

咱们用一个数组来维护用户选中的文件，实现添加、删除和列表渲染，最后在提交时用FormData把文件传给服务端，再模拟常规表单的页面跳转效果：

// 用来存储用户最终要上传的文件数组
let selectedFiles = [];

// 点击「添加文件」按钮，触发隐藏的文件选择框
document.getElementById('addFileBtn').addEventListener('click', () => {
  document.getElementById('hiddenFileInput').click();
});

// 处理用户选择文件的事件
document.getElementById('hiddenFileInput').addEventListener('change', (e) => {
  const newFiles = Array.from(e.target.files);
  // 合并到已选数组（可选：用Set去重，避免重复选择同一文件）
  selectedFiles = [...new Set([...selectedFiles, ...newFiles])];
  // 更新页面上的文件列表
  renderFileList();
  // 重置隐藏输入框，这样用户可以再次选择相同的文件
  e.target.value = '';
});

// 渲染已选文件列表，同时绑定删除按钮事件
function renderFileList() {
  const fileListEl = document.getElementById('fileList');
  fileListEl.innerHTML = '';
  
  selectedFiles.forEach((file, index) => {
    const fileItem = document.createElement('div');
    fileItem.className = 'file-item';
    fileItem.innerHTML = `
      <span>${file.name} (${formatFileSize(file.size)})</span>
      <button type="button" class="delete-btn" data-index="${index}">删除</button>
    `;
    fileListEl.appendChild(fileItem);
  });
  
  // 给每个删除按钮绑定点击事件
  document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const index = parseInt(e.target.dataset.index);
      selectedFiles.splice(index, 1);
      renderFileList();
    });
  });
}

// 辅助函数：格式化文件大小（B/KB/MB）
function formatFileSize(size) {
  if (size < 1024) return `${size} B`;
  else if (size < 1048576) return `${(size / 1024).toFixed(2)} KB`;
  else return `${(size / 1048576).toFixed(2)} MB`;
}

// 处理表单提交事件
document.getElementById('fileUploadForm').addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止原生表单提交
  
  // 构建FormData，把选中的文件都加进去
  const formData = new FormData();
  selectedFiles.forEach(file => {
    formData.append('files', file); // 这里的name要和服务端接收的参数名一致
  });
  
  // 用fetch提交，然后模拟常规表单的页面跳转效果
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    if (response.redirected) {
      // 如果服务端返回重定向，直接跳转到目标地址
      window.location.href = response.url;
    } else {
      // 如果服务端返回页面内容，替换当前页面的内容
      response.text().then(html => {
        document.documentElement.innerHTML = html;
      });
    }
  }).catch(error => {
    console.error('上传失败:', error);
    // 这里可以加错误提示，比如显示给用户
  });
});

这样实现后，用户可以在页面上添加、删除文件，提交后会像常规表单一样跳转或更新页面，服务端还是处理常规的multipart/form-data请求，完全不用修改服务端代码。

首先要澄清一个误区：通过Ajax发送File数组和通过常规HTTP Request（原生表单）发送文件，在安全性上没有本质区别，两者的风险是完全一致的。

可能你听到的“常规提交不安全”是某些场景下的误解，我帮你拆解一下：

• 浏览器安全限制：不管是Ajax还是表单提交，浏览器都不允许JS未经用户授权读取本地文件——你只能获取用户通过文件选择框主动选中的文件，这一点两者是一样的。
• 传输协议：两种方式都是用multipart/form-data格式传输文件，遵循HTTP协议，传输过程中的加密（HTTPS）、数据校验等机制完全相同。
• 服务端风险：真正的风险在于服务端是否对上传的文件做了校验（比如文件类型、大小、内容扫描），和提交方式无关。不管用哪种方式提交，恶意文件上传的风险都存在，需要服务端做好防护。

唯一的区别是同源策略的处理：表单提交允许跨域跳转，而Ajax跨域需要服务端配置CORS，但这是浏览器的访问控制机制，不是安全与否的问题。

所以结论是：两种提交方式的安全性等价，不存在Ajax更安全的说法，核心安全保障在于服务端的校验和浏览器的文件读取限制。

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