Question

我正在尝试从Laravel Filemanager上传多张图片。我使用Unisharp Filemanager，因为你不能直接从filemanager中选择多个，我想逐个选择它们，并将它们上传到一个容器中。从文档中，我使用$('#lfm').filemanager('image');。所以我创建了一个jQuery脚本，它应该创建更多的输入和图像，并将选定的图像放入其中，但它不能正常工作。即使思想ID正在改变，它总是取代第一张图像。我做错了什么？我的代码： HTML：

<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++;
        });

Answer 1

我知道这是一个老问题，但希望这个答案可以帮助任何人。

你不应该为lfm使用ID。在课堂上使用lfm，并为每个上传按钮使用不同的数据输入和数据预览。

最好的解决方案是使用类，因此有我的选择HTML：

<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>

比javascript 这是jquery ：

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

希望有人找到答案。

Filemanager laravel上传多个图片

1 个答案: