动态添加表单输入字段

时间:2015-09-27 08:47:48

标签: javascript jquery

HTML表格

convert -format %@ paper.png info:
406x620+38+68

Javascript文件

 <div class="module">
            <div class="moduleTitle">Upload Photos</div>            
                   <form id="upload" method="post" action="actions/upload.php" enctype="multipart/form-data">
            <div id="drop">
                Drop Here

                <a>Browse</a>
                <input type="file" name="upl" multiple />
            </div>

            <form onSubmit="addTags();return false;" id="tagAddForm">
            <ul>
                <!-- The file uploads will be shown here -->
            </ul>
                    <input type="submit" name="login" value="Add Tags" class="submit" id="login"/>
                    </form>
                    </div>
                    </form>

1 个答案:

答案 0 :(得分:0)

以下是一个演示如何根据文件数组动态生成(input/li)的内容。

//Create an empty container
var $elems = $();
//Cycle thru the files
$.each(data.files, function(idx, file) {
    //Create an input with attrs
    var $input = $("<input/>", {
        'type': 'text',
        'placeholder': 'separate tags with commas',
        'name': file["name"]
    });
    //Create list element & append input
    var $li = $("<li/>").append($input);
    //Populate the container with the list item
    $elems = $elems.add($li);
});
//Append all list items
$("#tagAddForm > UL").append($elems);

还有一个working demo,其中包含我为演示定义的示例文件。

Another one可选择根据文件名显示图像大拇指。