Javascript 动态创建文件输入元素

我想自定义文件输入按钮，因此我使用此代码创建一个文件输入元素

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

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

函数inputBtn（）{
var input=document.createElement（'input'）；
input.type=“文件”；
setTimeout（函数（）{
$（输入）。单击（）；
},200);
}
创造

---

但是，当我单击create时，它不会显示任何内容。

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

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

您可以在一个做得很差的JSFIDLE中看到这是如何工作的：

---

您遇到了一个错误，是吗？此外，您的代码不尝试显示输入，它只创建一个输入；出于安全原因，这是不可能的。@Daedalus--input.click（）；将在DOM元素“input”@user1789573上执行单击事件您在Firefox中成功地执行了吗？@user1789573显然，考虑到这个问题已经存在4年了，它是。简而言之：它在某一点上不起作用；现在可以了。谢谢你，马克，但我不想在前面展示这个元素，怎么做？@PandaYang，添加CSS来隐藏它：

input{display:none}

，当这对你有效时，请随意批准这个解决方案。我已经尝试了CSS，它不会起作用，因为当输入按钮被隐藏时，它显示的窗口也会被隐藏。我尝试了另一种方法，使用宽度和位置来最小化这个输入元素的大小，并找到与之重叠的图片。也谢谢你的帮助。@PandaYang，它对我在Windows上使用Firefox很好。请参见此处：document.body.appendChild（输入）将向DOM添加元素。您甚至可以通过其属性（即tagName=“MyUniqueInputAgName”）对其进行唯一标识；