如何将JavaScript生成的Blob对象填入文件上传输入框？

浏览器出于安全限制，不允许直接修改file输入框的value属性或直接赋值files列表，必须通过DataTransfer API来模拟用户选择文件的操作，具体步骤如下：

1. 将Blob转换为File对象（File继承自Blob，额外包含文件名、修改时间等表单提交需要的元信息）
2. 创建DataTransfer对象，把File添加到它的文件列表中
3. 将DataTransfer的文件列表赋值给file输入框的files属性

完整可运行代码 #

<form method="post" enctype="multipart/form-data" action="http://localhost:88/index.php">
  <input type="file" name="data" id="savegamedataZ"></input>
  <button onclick="writeSave()" id="submit-save" class="build-buttons">Save</button>
</form>
<script>
function writeSave() {
  // 假设data是你生成的文本内容
  const data = "这是生成的保存数据";
  
  // 1. 将Blob转为File，指定文件名（表单提交时会带上这个文件名）
  const saveFile = new File([data], "savegame.txt", {type: 'text/plain;charset=utf8'});
  
  // 2. 创建DataTransfer并添加文件
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(saveFile);
  
  // 3. 赋值给file输入框的files属性
  document.getElementById('savegamedataZ').files = dataTransfer.files;
  
  // 可选：自动提交表单
  // document.querySelector('form').submit();
}
</script>

为什么你之前的写法无效？ #

• 直接赋值value：file输入框的value只能是用户手动选择的本地文件路径，出于隐私保护，JS无法设置自定义值
• 直接修改file[0]：files属性是只读的FileList对象，无法直接修改其中的元素
• 使用createObjectURL生成的链接：这个URL是浏览器内部指向Blob的地址，但同样不能作为value赋值给file输入框

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