Windows系统下如何避免文件夹上传对话框自动进入已选文件夹？

问题说明 #

使用带directory/webkitdirectory属性的文件上传控件选择文件夹后，再次打开对话框时会自动定位到上次选中的文件夹，而非保持初始路径，在Windows系统下影响项目使用体验。

原因分析 #

这是浏览器的默认行为——为了提升重复操作效率，会记住用户上次选择的文件/文件夹路径，针对文件夹上传场景，该逻辑会导致每次打开对话框都进入上次选中的文件夹，不符合需求。

可行解决方案 #

由于浏览器并未提供直接修改该默认行为的API，目前有两种实用的处理方式：

1. 动态重建上传控件 #

每次触发对话框前，移除原有的input[type="file"]元素，创建一个新的相同控件。浏览器对新控件不会保留之前的路径记忆，打开时会回到默认路径（如“此电脑”或系统级默认文件夹）。

示例代码：

<div id="upload-container">
  <input type="file" directory webkitdirectory />
</div>

<script>
document.querySelector('#upload-container input').addEventListener('click', function() {
  // 创建新控件
  const newInput = document.createElement('input');
  newInput.type = 'file';
  newInput.setAttribute('directory', '');
  newInput.setAttribute('webkitdirectory', '');
  
  // 替换旧控件
  this.parentNode.replaceChild(newInput, this);
  
  // 绑定选中事件逻辑
  newInput.addEventListener('change', handleFolderSelect);
});

function handleFolderSelect(e) {
  // 处理文件夹选中后的业务逻辑
  console.log('选中的文件夹:', e.target.files);
}
</script>

2. 使用系统级API（桌面项目场景） #

如果你的项目基于Electron等桌面框架开发，可以调用系统原生的文件夹选择对话框API，通过指定defaultPath参数强制设置每次打开的初始路径，完全绕过浏览器的默认行为。

示例（Electron主进程代码）：

const { dialog } = require('electron');

dialog.showOpenDialog({
  properties: ['openDirectory'],
  defaultPath: 'C:\\' // 可指定你需要的固定初始路径
}).then(result => {
  if (!result.canceled) {
    console.log('选中的文件夹:', result.filePaths[0]);
  }
});

注意事项 #

• 动态重建控件的方案对纯前端项目完全适用，需注意保留原有事件绑定和样式。
• 浏览器的路径记忆是全局行为，无法仅针对单个页面或控件修改，动态重建是目前最可靠的前端解决方案。

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