2017-02-26 32 views
0

我使用jQuery多文件插件,这是插件的普通视图jQuery中多文件插件动态创建输入文件元件

enter image description here

这是此

<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/> 
HTML语法

我试图动态生成这个文件输入

所以我试图ap挂起这个曾经“点击这里”按钮,点击会发生

<button type="button" id="ifile">click here</button>    
<div id="target_div"></div> 

<script type="text/javascript"> 

    $('#ifile').click(function() { 
     // when the add file button is clicked append 
     // a new <input type="file" name="someName" /> 
     // to a target_div div 
     $('#target_div').append(
      $('<input/>').attr('type', "file").attr('name', "file").attr('id', "someName").attr('class', "multi").attr('onchange', "return Plugins.handleFileSelect(this);") 
     ); 
    }); 
</script> 

但一旦我这样做其发电普通文件的输入,但它不是上市文件正确

一次我打开检查元素,我可以看到类似以下

视图

enter image description here

我怎么能产生这种正常

回答

1

您应该使用多文件的插件,而不是

$('#ifile').click(function() { 
    // when the add file button is clicked append 
    // a new <input type="file" name="someName" /> 
    // to a target_div div 
    var input = $('<input/>') 
       .attr('type', "file") 
       .attr('name', "file") 
       .attr('id', "someName"); 
    //append the created file input 
    $('#target_div').append(input); 
    //initializing Multifile on the input element 
    input.MultiFile(); 
}); 
+0

你的答案非常准确,我想如果你能回答[此问题(http://stackoverflow.com/questions/42466136/input-file-no-file-choosen-text-hide-using-button)太是隐藏“在上面的多文件输入无文件choosen文本” 和我有[另一个问题](http://stackoverflow.com/questions/42468973/shorten-the-lengthy-label-name-using-substring-or-substr-in-jquery-multifile),这是缩短jQuery的多文件冗长的标签名 – kez

0

你可以使用附加这样

$('#target_div').append('<input type="file" id="someName" name="file" class="multi" onchange="return Plugins.handleFileSelect(this);"/>') 

顺便说一句,你可以检查jQuery的文档进行追加

http://api.jquery.com/append/