如何通过HTML将表单中<input type="file">控件的文件保存至桌面

首先明确：浏览器出于安全限制，不允许网页直接控制文件的保存路径（比如强制存到桌面），所有文件保存操作必须经过用户确认选择路径。

1. 实现文件选择与下载流程 #

第一步：创建文件选择表单 #

用<input type="file">让用户选取本地文件：

<form id="fileSelectForm">
  <input type="file" name="file" id="filePicker">
  <button type="button" onclick="initiateDownload()">下载选中文件</button>
</form>

第二步：将选中文件转为可下载资源 #

通过JavaScript把用户选中的文件转换为临时下载链接，触发浏览器下载对话框：

function initiateDownload() {
  const filePicker = document.getElementById('filePicker');
  const selectedFile = filePicker.files[0];

  if (!selectedFile) {
    alert('请先选择一个文件');
    return;
  }

  // 生成文件的临时Blob URL
  const tempUrl = URL.createObjectURL(selectedFile);
  // 创建隐藏的下载链接
  const downloadLink = document.createElement('a');
  downloadLink.href = tempUrl;
  // 保留原文件名
  downloadLink.download = selectedFile.name;

  // 触发下载点击
  downloadLink.click();

  // 释放临时URL资源，避免内存泄漏
  URL.revokeObjectURL(tempUrl);
}

执行后浏览器会弹出下载窗口，用户可以手动选择保存到桌面——这是目前前端能做到的最接近需求的方案。

2. 关于"发送表单文件数据到桌面"的说明 #

网页没有直接写入本地桌面的权限，不存在前端直接实现的方法。可行的替代思路：

• 引导用户通过上述下载流程手动选择桌面作为保存路径
• 如果有后端服务，可以让后端接收表单上传的文件，再返回下载链接，同样由用户选择保存位置
• 若需要自动保存到桌面，必须使用桌面应用框架（比如Electron），这类框架拥有本地文件系统的访问权限，能实现指定路径保存。

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