4

ユーザーが 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非表示にします。ページの読み込み時に、jquery を介して非表示のクラスでボタンを作成します。#add_more最初に最初のファイルがアップロードされたときに、さらにボタンを追加すると表示されます。これは正常に動作します。2 番目からケース以降、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'/>");
      }  

});

また、ファイルごとに削除ボタンを追加する必要があります。

スクリーンショット

4

1 に答える 1

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>

于 2015-12-13T12:02:12.700 に答える