Javascript 和文件上传无法按预期使用 click()

Question

我正在用 javascript 创建一个上传控件，然后使用element.click() 来打开文件浏览器对话框。

    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++;                     
    }

文件浏览器对话框按预期出现，但在我在表单上选择提交后，输入到控件中的任何文件都会消失。

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

如何将文件上传控件添加到我的表单并让它显示文件浏览器对话框并仍然按预期工作。

Answer 1

“文件”输入类型必须包含属性：

enctype="multipart/form-data"

当 post 方法被指定时。看到这个：http://www.w3.org/TR/html4/interact/forms.html#edef-FORM

在这种情况下也可能存在其他限制，根据您的问题，听起来您可能正在尝试在 AJAX 调用中进行上传。看看这里的答案：https://stackoverflow.com/questions/3686917/post-to-php-with-enctype-multipart-form-data

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

Answer 2

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

我会通过完全删除 .click() 并在先前输入的 change 事件上添加新文件输入来解决它，这样每个新文件不需要单击 2 次（添加输入 +然后打开对话框）。示例http://jsfiddle.net/APstw/1/

另见jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

Answer 3

正如 Ann.L 所指出的，在尝试将上传控件动态添加到页面时，您可能会遇到奇怪的行为。

我记得 IE 尤其会静默失败并且不会发布您的数据（您会看到请求中发布的文件名，但没有对应的实际“字节数组”）。

为什么不切换上传字段的可见性，而不是从头开始创建呢？这样，页面“拥有”控件，并且您的功能很可能会起作用。剩下要做的就是用新上传的文件刷新您的容器。