Jquery “上载倍增文件并删除”按钮

所以我有代码，允许用户点击图标，然后选择要上传的文件。每次单击图标时，都会添加一个新的输入字段，该字段的类型为file，名称相同-file[]数组

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

我该怎么做

这就是我现在拥有的： 隐藏=显示：无

<form class="form-horizontal" action='#' method="post"  enctype="multipart/form-data">

    <img class="uploadFileImg" alt="" src="images/photoIconOn.png"> <br /><br/>
    <span class="fileNameBox"></span>
    <input type='file' name='file[]' class='file-field hide' maxlength='2' accept="image/jpg,image/png,image/jpeg,image/gif" />

</form>

---

既然您使用的是jQuery和Bootstrap，我们将继续使用它

所以我们需要两个输入组：

带有添加选项的默认值 隐藏的一个带有删除选项 这是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>

您可以在这里看到JSFIDLE上的一个工作示例：

---

嗨，非常感谢你抽出时间！只有一件事-在您的代码中显示输入字段，我希望+图标将打开浏览器对话框，当我选择文件时，代码只需打印其名称，旁边带有删除图标。在这种情况下，使用现有库可能更容易。结帐或付款。它们可以处理多个文件，定制这些文件非常简单。

$(function() {
    $(document).on('click','.clear_file',function() {
        $(this).closest('form').find('input.file-field').val("")
        $(this).closest('form').find('.fileNameBox').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>

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