将html输入文件元素从一种形式复制到另一种形式

【问题标题】：copy html input file element from one form to another将html输入文件元素从一种形式复制到另一种形式
【发布时间】：2012-07-13 01:45:51
【问题描述】：

您好，我有如下要求，我有一个文件元素，这种形式包含许多其他字段也因此我无法提交，但在文件选择后我需要上传所以我用 iframe 创建了第二个表单。我无法将文件元素从一种形式复制到另一种形式，尤其是在我尝试使用 cloneNode 和 appendChild 时都没有任何建议。我真的被困住了。

<form name ="form1">
   <input type="file"/>
</form>

<form name="form2">       
<form>

【问题讨论】：

为什么不用fileuploadui js插件？它会为您完成后台上传过程。
我已经创建了自己的文件上传组件，因此无法使用任何其他插件。任何简单的解决方案。
您应该检查属性更改的事件，并在它更改时将第一个表单提交到 iframe。

标签： javascript html

【解决方案1】：

看起来cloneNode 允许克隆文件输入。可能的代码如下：

<form name="form1">
  <input id="file1" type="file" onchange="copy_file_input()" />
</form>
<form name="form2" enctype="multipart/form-data">
  <input type="hidden" name="test" value="form2sent" />
</form>

function copy_file_input() {
  var target_form = document.forms.form2;
  if (target_form.file2 != undefined) {
    target_form.removeChild(target_form.file2);
  }
  var elem = document.getElementById('file1');
  var copy = elem.cloneNode(true);
  copy.name = 'file2';
  target_form.appendChild(copy);
}

这个link 也可能有用。

【讨论】：

嗨，我做了同样的工作，但服务器端我没有收到任何数据。
@saravananshanmugavel 你是对的，我测试了它，它无法复制所选文件。你可以试试这个更新是否有效？