jquery - Laravel 文件管理器上传多个图像

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

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

您不应该将 ID 用于 lfm。在类里面使用lfm，并为每个上传按钮使用不同的数据输入和数据预览。

最好的解决方案是使用类，所以有我CHOOSE的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>

希望有人能找到答案。