动态创建的 HTML 文件输入元素不发布数据

Question

我有一个使用 document.createElement 动态创建的表单。 组件的创建方式相同。 该表单用于将文件上传到 PHP 脚本，并在提交时加载表单目标属性指定的 iframe 中的响应。

不幸的是，服务器收到一个空白的 $_FILES 数组，当我检查 POST 请求时，我发现文件数据未包含在请求中。 如果我改为使用 Google Chrome 开发人员工具动态编辑动态创建的表单（在此过程中，我只是编辑然后绝对不更改任何代码），然后表单提交工作完美，发送相关文件数据.

所以这让我意识到我在 html 中的表单构造没有任何问题，因为它没有任何改变就可以工作。 这让我相信浏览器不喜欢我动态创建文件输入元素？

为了完整起见，这里是动态生成的表格：

<form method="POST" action="includes/uploadPic.php" 
      enctype="multipart/form-data" target="fileResponse">
  <input type="file" name="pic">
  <input type="submit" value="Upload">
</form> 

并且print_r($_FILES)在服务器上给出一个空数组。

谁能给我解释一下？ 我的替代方法是在文档中静态创建一个隐藏表单，并在需要时将其 append 放到相关的 div 中，但我真的不喜欢那种东西。

下面是生成表单的代码：

    var form = document.createElement("form");
    var fileUpload  = document.createElement("input");
    var uploadBut   = document.createElement("input");

    form.setAttribute("method",  "POST");
    form.setAttribute("action",  "includes/uploadPic.php");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("target",  "fileResponse");
    fileUpload.setAttribute("type",  "file");
    fileUpload.setAttribute("name",  "pic");
    uploadBut.setAttribute ("type",  "submit");
    uploadBut.setAttribute ("value", "Upload");
    form.appendChild(fileUpload);
    form.appendChild(uploadBut);
    dlgContent.appendChild(form);

Answer 1

如果将form标签放在div标签中，它不会将动态创建的元素发布到服务器。 但是，如果你把它放在div或table标签之外，它就可以工作。

Answer 2

尝试这个：

var form = document.createElement("form");
var fileUpload  = document.createElement("input");
var uploadBut   = document.createElement("input");

form.method = "POST";
form.action = "includes/uploadPic.php";
form.enctype = "multipart/form-data";
form.target = "fileResponse"; /* I think you are trying to submit this from in an iframe */
fileUpload.type = "file";
fileUpload.name = "pic";
uploadBut.type = "submit";
uploadBut.value = "Upload";
form.appendChild(fileUpload);
form.appendChild(uploadBut);
dlgContent.appendChild(form);