Question

我要做的是允许上传多个文件。每次使用选择文件我想打印它的名称并在其旁边添加“删除”按钮。

我希望用户点击加号图标时打开浏览器对话框（而不是点击输入字段）：

<button class="btn btn-default add" type="button"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></button>

到目前为止，我的加号按钮只是添加了新的文件字段，用户需要点击“浏览器”。

https://jsfiddle.net/divspace/pwepeez1/

我希望加号按钮将打开文件对话框。记住它是为多个文件上传的....

这就是HTML的样子：

<form id="form" class="form-horizontal" method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-xs-2 control-label" for="file">Upload Image</label>
        <div class="col-xs-8">
            <input id="file" class="form-control" type="file" name="file[]" accept="image/*">
        </div>
        <div class="col-xs-2">
            <button class="btn btn-default add" type="button"><i class="glyphicon glyphicon-plus" aria-hidden="true"></i></button>
        </div>
    </div>
    <!-- START FILE UPLOAD TEMPLATE -->
    <div id="upload-template" class="form-group hide">
        <div class="col-xs-offset-2 col-xs-8">
            <input id="file" class="form-control" type="file" name="file[]" accept="image/*">
        </div>
        <div class="col-xs-2">
            <button class="btn btn-default remove" type="button"><i class="glyphicon glyphicon-minus" aria-hidden="true"></i></button>
        </div>
    </div>
    <!-- END FILE UPLOAD TEMPLATE -->
</form>

JS：

$('#form')
.on('click', '.add', function () {
    var $template = $('#upload-template');
    var $clone    = $template.clone().removeClass('hide').removeAttr('id').insertBefore($template);

    $clone.find('[name="file[]"]');
}).on('click', '.remove', function () {
    var $row = $(this).closest('.form-group');

    $row.find('[name="file[]"]');

    $row.remove();
});

如何创建多重文件对话框

0 个答案: