动态创建文件输入元素答案

【问题标题】：Dynamically create file input element动态创建文件输入元素
【发布时间】：2012-05-17 21:49:05
【问题描述】：

我想自定义文件输入按钮，所以我用这段代码来创建一个文件输入元素

function inputBtn(){
    var input=document.createElement('input');
    input.type="file";
    setTimeout(function(){
        $(input).click();
    },200);
}

<button id="ifile" onclick="inputBtn()">create</button>

但是，当我单击创建时，它什么也没显示。

【问题讨论】：

您遇到了错误，不是吗？此外，您的代码不会尝试显示输入，它只会创建一个。
您也无法使用 jquery 单击文件输入；出于安全原因，这是不可能的。
@Daedalus -- input.click();将在 DOM 元素 'input' 上执行点击事件
@user1789573 你在 Firefox 中成功地做到了这一点吗？
@user1789573 显然，鉴于这个问题已有 4 年历史，它是 helps to do your research first。简而言之：它在某一时刻不起作用；现在可以了。

标签： javascript html file-io

【解决方案1】：

您正在创建新的 DOM 元素，但并未将其附加到 DOM。你需要这样的东西：

document.getElementById('target_div').appendChild(input);

你可以在这里看到它在一个做得不好的 JSFiddle 中是如何工作的： http://jsfiddle.net/JQHPV/2/

【讨论】：

谢谢Marc，但是我不想在前面展示这个元素，这怎么办？
@PandaYang，添加 CSS 以将其隐藏：input {display: none}，如果适合您，请随时批准此解决方案。
我试过css，它不起作用，因为当输入按钮被隐藏时，它显示的窗口也被隐藏了。我尝试了另一种方法，使用宽度和位置来最小化这个输入元素的大小并找到一个图片重叠它。也感谢您的帮助。
@PandaYang，在 Windows 上使用 Firefox 对我来说效果很好。见这里：jsfiddle.net/JQHPV/4
document.body.appendChild(input) 会将元素添加到 DOM。您甚至可以通过它的属性来唯一地识别它（即 tagName = "MyUniqueInputTagName"）；