在 jQuery MultiFile 插件中动态创建输入文件元素

Question

我正在使用 jQuery MultiFile 插件，这是该插件的普通视图

这是 HTML

的语法

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

我正在尝试动态生成此文件输入

所以我尝试添加一次 "click here" 按钮点击发生

 <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>

但是一旦我这样做它会生成普通文件输入但它没有正确列出文件

打开 inspect elements 后，我可以看到如下所示的视图

我怎样才能正确生成这个

Answer 1

你可以像这样使用追加

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

顺便说一句，您可以查看 jquery 文档以追加

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

Answer 2

您应该改用 MultiFile 插件

$('#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();
});

在 jQuery MultiFile 插件中动态创建输入文件元素

dynamically create input file element in jQuery MultiFile plugin

html

javascript

jquery

onchange