获取文件名，如果文件上传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。否则隐藏页面的加载button.On我做按钮通过jquery.Initially时隐藏#add_more类第一个文件上传，添加更多按钮获得工作字符：显示第二fine.From起的情况下，我需要显示add more只有当一个文件是uploaded.Pls帮我

$('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>