上傳乘法文件並刪除按鈕

Question

因此，我有代碼，允許用戶點擊圖標和比選擇文件上傳。每次他們點擊圖標new INPUT字段添加類型「文件」和名稱是相同的 - 「文件[]」（數組）。

我想要做的是允許上傳多個文件。每次使用選擇文件我想打印它的名稱，並添加旁邊的「刪除」按鈕。

我該怎麼辦呢？

這是我現在有： （隱藏=顯示：無）

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

JS：

$(".uploadFileImg").on('click',function(){ 
    $(".file-field").trigger('click'); 

    var new_field = $("<input type='file[]' class='form-control file-field hide'>"); 
    $(this).closest('form').append(new_field);  

}); 

刪除文件：

$(function() { 
    $(document).on('click','.clear_file',function() { 
     $(this).closest('form').find('input.file-field').val("") 
     $(this).closest('form').find('.fileNameBox').html(""); 
    }); 
}); 

Answer 1

由於您使用jQuery和Bootstrap，我們會堅持。

因此，我們將需要兩個輸入組：

1. 默認一個有一個附加選項
2. 隱藏的一個具有移除選項

這就是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(); 
}); 

你可以在這裏看到的jsfiddle工作示例：

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