Javascript和文件上载未按预期使用click（）工作

我正在用javascript创建一个上载控件，然后使用

元素。单击（）

打开文件浏览器对话框

    function add(type) {            
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);            
        element.setAttribute("id", "element-" + i);
        var removebutton = document.createElement('a');
        var removeimage = document.createElement('img');
        removeimage.setAttribute("width", 15);
        removeimage.setAttribute("height", 15);
        removeimage.setAttribute("class", "removebutton");                                                
        removeimage.src = "/Content/Images/redx.png";            
        removebutton.appendChild(removeimage);
        removebutton.setAttribute("id", "remove-" + i);
        removebutton.setAttribute("onclick", "remove(" + i + "); return 0;");
        var newfile = document.getElementById("uploadhere");
        //newfile.appendChild(removebutton);
        newfile.appendChild(element);
        newfile.appendChild(removebutton);
        element.click();
        i++;                     
    }

“文件浏览器”对话框按预期显示，但在我选择表单上的“提交”后，任何输入控件dissapear的文件都会显示出来

如果我点击“浏览”，我会看到文件浏览器对话框，但是文件上传正确

如何将文件上载控件添加到表单中，使其显示“文件浏览器”对话框，并仍能按预期工作

“文件”输入类型必须包括以下属性：

enctype="multipart/form-data"

当指定post方法时。见此：

在这个场景中可能还有其他限制，根据您的问题，听起来您可能试图在AJAX调用中进行上传。请看下面的答案：

---

从您的代码中不确定您是否正在使用jQuery，但如果您正在使用jQuery，您是否尝试隐藏一个输入表单并根据需要创建另一个表单？

正如Ann.L所指出的，在尝试向页面动态添加上载控件时，您可能会出现奇怪的行为

我记得IE特别会自动失败，不会发布数据（你会看到请求中发布的文件名，但没有对应的实际“字节数组”）

---

为什么不切换上载字段的可见性，而不是从头开始创建它？通过这种方式，页面“拥有”控件，并且您的函数很可能会工作。唯一要做的就是用新上传的文件刷新容器。

Firefox是唯一允许这样做的浏览器。Chrome、safari和opera一开始就不允许这样做，而IE只是在愚弄你，它可以但实际上不会提交这样选择的文件

我将通过删除

.click（）

并在先前输入的

change

事件中添加一个新文件输入来解决这个问题，这样就不需要为每个新文件单击两次（添加输入+然后打开对话框）。范例

---

另请参见

请在变量“i”的定义位置添加一个示例？这里有一个粗略的定义为“我”。我看到的另一个问题是，您也没有向我们展示remove（）函数。我一直都明白，您无法编写upload元素的脚本，因为如果您可以这样做，您可能会犯下许多侵犯隐私的错误。但也许这在我调查后的几年里已经改变了？我没有包括删除，因为它按预期工作。我认为Ann是正确的。作为旁注，您一次创建并附加一个DOM元素，这将导致浏览器多次回流。查看如何使用

document.createDocumentFragment

创建一个文档，然后将新元素添加到片段中，最后将片段本身添加到DOM本身的正确位置。这只会触发一次回流，效率更高。这在我的FORM中有详细说明。我没有发布我所有的代码。。。虽然我很感激人们对这条评论投赞成票，因为这是需要检查的东西，但这不是解决方案。因为我允许任何使用表单的人根据需要添加另一个要上载的文件。理论上我可以做一堆上传选项，然后把它们全部隐藏起来，但这似乎是一个非常糟糕的计划。