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

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

如果单击“浏览”，我会收到文件broswer对话框，但文件上传正确。

如何将文件上传控件添加到表单中，并让它显示文件broswer对话框并仍然按预期工作。

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会默默地失败并且不会发布您的数据（您将看到请求中发布的文件名，但没有与之对应的实际“字节数组”）。

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

使用click（），Javascript和文件上传无法正常工作

3 个答案: