jquery - 如果在 jquery 中上传文件不起作用，则获取文件名

Question

我想让用户在 PHP 中上传多个文件。

HTML：

<input name="file[]" type="file" class="multi_files" style="margin: 0px 0px 15px;" />
<button class="add_more">Add More Files</button>

当用户选择一个文件时，我需要显示按钮Add more file。否则隐藏按钮。在加载页面时，我#add_more通过 jquery 制作了隐藏类的按钮。最初当第一个文件上传时，添加更多按钮显示。这很好用。从第二个开始案例开始，我add more只需要在下一个文件上传时显示。请帮助我

$('input:file.multi_files').change(
        function(){
            $('input:file').removeClass('multi_files');
            if ($(this).val()) {
                $('.add_more').show();
            } 
            else
            {
                $('.add_more').hide();

            }
        }
        );
  $('.add_more').click(function(e){
    e.preventDefault();
   //my logic is I will check immediate input file has file or not with this condition.
  //But this condition always give me undefined value.
    if($(this).closest('input:file').val())
      {

        $(this).before("<input name='file[]' type='file' class='multi_files'/>");
      }  

});

我还需要为每个文件添加删除按钮。

Answer 1

$('.add_more').hide();
$('input:file.multi_files').change(
        function(){
            $('input:file').removeClass('multi_files');
            if ($(this).val()) {
                $(this).after("<button class='remove'>X</button><br/>");
                $('.add_more').show();
            } 
            else
            {
                $('.add_more').hide();

            }
        }
        );

  $('body').on('click','.remove',function(){
   
    if(document.getElementsByClassName('file').length > 1 ){
      $(this).prev('input:file').remove();
      $(this).next('br').remove();
      $(this).remove();
     }
  });

  $('.add_more').click(function(e){
    e.preventDefault();
    var filePresent = document.getElementsByClassName('file')[document.getElementsByClassName('file').length-1].files.length;
    if(filePresent >0  ){
        $(this).before("<input name='file[]' type='file' class='multi_files file'/><button class='remove'>X</button><br/>");
      }  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input name='file[]' type='file' class='multi_files file'/>
<button class="add_more">Add More</button>