使用JavaScript+FormData处理#myfile文件，上传前如何下载验证？

核心思路 #

无需依赖已存入FormData的文件，直接从文件选择框的files对象中获取原文件，通过浏览器的URL.createObjectURL生成临时下载链接，实现本地下载校验，全程无需上传到服务器。

实现代码 #

HTML结构

<!-- 文件选择框 -->
<input type="file" id="myfile">
<!-- 下载按钮，默认禁用，选中文件后启用 -->
<button id="downloadBtn" disabled>下载选中文件</button>

JavaScript逻辑

// 获取DOM元素
const fileInput = document.getElementById('myfile');
const downloadBtn = document.getElementById('downloadBtn');

// 监听文件选择事件，控制下载按钮状态
fileInput.addEventListener('change', function() {
  downloadBtn.disabled = !this.files.length;
});

// 实现下载功能
downloadBtn.addEventListener('click', function() {
  const selectedFile = fileInput.files[0];
  if (!selectedFile) return;

  // 生成文件的临时Blob URL
  const tempFileUrl = URL.createObjectURL(selectedFile);
  // 创建隐藏的a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = tempFileUrl;
  // 保留原文件名作为下载文件名
  downloadLink.download = selectedFile.name;
  // 触发点击下载
  downloadLink.click();
  // 释放临时URL，避免内存泄漏
  URL.revokeObjectURL(tempFileUrl);
});

补充说明 #

如果已经将文件存入FormData，也可以直接从FormData中提取文件进行下载，示例代码如下：

// 假设已创建FormData并添加了文件
const formData = new FormData();
formData.append('uploadFile', fileInput.files[0]);

// 从FormData中获取文件
const fileFromFormData = formData.get('uploadFile');
// 后续下载逻辑和上面一致，用fileFromFormData替代selectedFile即可

这种方式完全在浏览器本地完成，下载的文件就是用户选中的原始文件，可直接用于校验文件内容、格式是否符合要求，确认无误后再执行上传操作。

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