2016-10-26 7 views
0

Laravel Filemanagerから複数の画像をアップロードしようとしています。私はUnisharp Filemanagerを使用していますので、filemanagerから複数のファイルを直接選択することはできませんので、それらを1つずつ選択してコンテナにアップロードしたいと思います。ドキュメントから、私は$('#lfm').filemanager('image');を使用します。そこで私はjQueryのスクリプトを作成しました。これはより多くの入力と画像を作成し、選択された画像をそれらに入れるべきですが、正しく動作しません。考えIDは変化していても、常に最初のイメージを置き換えます。私は間違っているの? マイコード: HTML:Filemanager laravel複数の画像をアップロードする

<div class="col-md-4"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
      <a id="lfm2" data-input="thumbnail1" data-preview="holder1" class="lfm2 btn btn-primary"> 
       <i class="fa fa-picture-o"></i> Choose 
       <input id="thumbnail1" class="form-control" type="hidden" name="filepath2[]"> 
      </a> 
     </span> 

    </div> 
</div> 

<div class="form-group"> 
    <div class="col-md-4"> 
     <div id="other_images_container"> 
      <img id="holder1" style="margin-top:15px;margin-bottom:20px;max-height:100px;margin-right:15px;margin-left:15px;"> 
     </div> 
    </div> 
</div> 

のjQuery:

var y = 2; 

     $('.lfm2').click(function() { 

      $('.lfm2').filemanager('image'); 

      var input = '<input id="thumbnail'+y+'" class="form-control" type="hidden" name="filepath2[]">'; 
      var image = '<img id="holder'+y+'" style="margin-top:15px;margin-bottom:20px;max-height:100px;margin-right:15px;margin-left:15px;">'; 

      $(this).append(input); 
      $('#other_images_container').append(image); 
      $('.lfm2').attr('data-input', 'thumbnail'+y).attr('data-preview', 'holder'+y); 
      y++; 
     }); 

答えて

3

私はこれが古い質問ですけど、この答えは誰にも役立ちます願っています。

lfmにはIDを使用しないでください。 クラスにlfmを使用し、アップロードボタンごとに異なるデータ入力とデータプレビューを使用します。

最善の解決策は、クラスを使用することですので、私のCHOOSE HTMLがあります。

<script> 
    $('[class*="lfm"]').each(function() { 
     $(this).filemanager('image', {prefix: route_prefix}); 
    }); 
</script> 

誰もが答えを見つけるの希望:JavaScriptのよりも

<div class="row"> 
    <div class="col-md-6"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
     <a data-input="thumbnail" data-preview="holder" class="lfm btn btn-primary"> 
      <i class="fa fa-picture-o"></i> CHOOSE 
     </a> 
     </span> 
     <input id="thumbnail" class="form-control" type="text" name="image" readonly> 
    </div> 
    <img id="holder" style="margin-top:15px;max-height:100px;"> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-6"> 
    <div class="input-group"> 
     <span class="input-group-btn"> 
     <a data-input="thumbnail2" data-preview="holder2" class="lfm btn btn-primary"> 
      <i class="fa fa-picture-o"></i> CHOOSE 
     </a> 
     </span> 
     <input id="thumbnail2" class="form-control" type="text" name="image" readonly> 
    </div> 
    <img id="holder2" style="margin-top:15px;max-height:100px;"> 
    </div> 
</div> 

が、これはjqueryのです。

関連する問題