动态创建文件输入元素 [英] Dynamically create file input element

问题描述

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

  function inputBtn ）{
 var input = document.createElement（'input'）; 
 input.type =file; 
 setTimeout（function（）{
 $（input）.click（）; 
}，200）; 
} 
 
< button id =ifileonclick =inputBtn（）> create< / button> 
  

然而，当我点击创建时，它什么也没有显示。您正在创建新的DOM元素，但您并未将其附加到DOM。你需要这样的东西：

  document.getElementById（'target_div'）。appendChild（input）; 
  

你可以看到这是如何在一个糟糕的JSFiddle中工作的：
http://jsfiddle.net/JQHPV/2/

I want to customize the file input button, so I use this code to create an file input element

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

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

However, when I click create, it shows nothing.

解决方案

You're creating the new DOM element, but you're not attaching it to the DOM. You need something like:

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

You can see how this works in a poorly done JSFiddle here: http://jsfiddle.net/JQHPV/2/

这篇关于动态创建文件输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！