动态创建文件输入元素

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

为什么我们需要追加输入元素？

$('[name=avatar]').addEventListener('click', (evt) => {
    const input = document.createElement('input')
    input.type = 'file'
    input.click()


    input.onchange = (evt) => {
        console.log(evt.target.files[0])
    }
})