如果文件在 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 加载我用 class #add_more 隐藏了页面jquery.Initially 当第一个文件上传时，添加更多按钮得到 displayed.This 有效 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>

如果文件在 jquery 中上传无效，则获取文件名

Get the filename if files are uploaded in jquery not working

jquery

multiple-file-upload