能否通过JavaScript设置表单文件上传的文件名与内容并实现跨元素复制？

好问题！这其实涉及到浏览器的安全限制和File API的使用边界，我来给你拆解清楚：

一、能否用JavaScript设置文件上传控件的文件名与内容？ #

浏览器出于安全考量，不允许脚本直接修改<input type="file">的文件路径或直接注入自定义文件内容——这是为了防止恶意脚本未经用户许可就读取、上传本地文件。不过有两种合法的间接实现方式：

• 自定义显示文件名：如果只是想修改页面上显示的文件名（不改变实际文件），可以在用户选择文件后，用JS获取原文件名，然后在页面的其他元素（比如<span>）展示自定义后的名称，而非修改file控件本身。
• 创建并设置自定义文件：如果需要让file控件“选中”一个你生成的自定义内容文件，可以借助File构造函数和DataTransfer对象，但这个操作必须触发在用户主动交互事件（比如点击按钮）内，否则会被浏览器拦截。示例代码：

// 必须绑定在用户点击这类交互事件中
document.getElementById('create-file-btn').addEventListener('click', () => {
  const fileInput = document.getElementById('custom-file');
  // 创建一个包含自定义内容的虚拟文件
  const customFile = new File(['这是自定义的文件内容'], '我的自定义文件名.txt', { type: 'text/plain' });
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(customFile);
  // 将虚拟文件设置到文件输入控件
  fileInput.files = dataTransfer.files;
});

二、能否将一个文件输入的内容复制到另一个中？ #

直接把第一个input的files属性赋值给第二个是不行的，因为files是只读属性。但同样可以利用DataTransfer对象，在用户交互的前提下实现复制：

// 示例：点击按钮复制文件
document.getElementById('copy-file-btn').addEventListener('click', () => {
  const sourceInput = document.getElementById('source-file');
  const targetInput = document.getElementById('target-file');
  
  if (sourceInput.files.length === 0) {
    alert('请先选择要复制的文件');
    return;
  }
  
  const dataTransfer = new DataTransfer();
  // 复制选中的第一个文件（如需复制多个可循环添加）
  dataTransfer.items.add(sourceInput.files[0]);
  targetInput.files = dataTransfer.files;
});

关键注意点 #

所有涉及修改file控件文件的操作，都必须在用户主动触发的交互事件（如点击、选择文件的change事件）中执行，这是浏览器的安全红线，无法绕过。

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