如果在jquery中上传文件不起作用,请获取文件名

2023年7月31日 175次阅读

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

HTML：

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

当用户选择一个文件时,我需要显示按钮添加更多文件.否则隐藏按钮.在加载页面时,我通过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'/>");
      }  

});

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

《如果在jquery中上传文件不起作用,请获取文件名》

最佳答案

$('.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>
点赞