Question

我有一个Bootstrap Modal用于上传多个图像。当用户单击“添加产品图像”按钮时，它将生成一个新的图像上传输入表单，当用户选择一个图像时，它将立即在上传按钮下方显示一个图像。我的代码工作正常，但有一个小问题。

我的问题： 当用户单击“添加产品图像”按钮时，它将生成一个新的图像上传输入表单，然后选择该图像，然后新图像替换第一个图像。我想显示多张图片

<div class="product-image">
    <div class="form-group">
        <div class="Image-upload">
            <span class="image-option-close">&times;</span>
            <label for="product_images"> Upload Image </label>
            <img src="" id="image"  class="h-100" alt="">
            <input type="file" id="product_images[]" accept="image/*" name="product_images" onchange="readURL(this);">
           </div>
         </div>
       </div>



$(function () {
        $(this).on('click', '#add-product-image', function () {
            var form = '<div class="form-group"><div class="Image-upload"><span class="image-option-close">&times;</span><label for="product_images" class="">Upload Image</label><input type="file" id="product_images" accept="image/*" name="product_images[]" onchange="readURL(this);"></div></div>';
            $('.product-image').append(form)
        });

        $(this).on('click', '.image-option-close', function () {
            var target_input = $(this).parent();
            target_input.remove();
        })
    });

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image')
                    .attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

请参阅gif文件 https://i.postimg.cc/MG3njJBS/ezgif-com-gif-maker.gif

Answer 1

我想我误会了，您的意思是添加jquery处理正确吗？这与laravel无关，但是为什么标记了laravel？也许这会有所帮助

$(function () {
        $(this).on('click', '#add-product-image', function () {
            var form = '<div class="form-group"><div class="Image-upload"><span class="image-option-close">&times;</span><label for="product_images" class="">Upload Image</label><input type="file" id="product_images" accept="image/*" name="product_images[]" onchange="readURL(this);"></div></div>';
            $('.product-image').append(form)
        });

        $(this).on('click', '.image-option-close', function () {
            var target_input = $(this).parent();
            target_input.remove();
        })
    });

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var newimage = $('#image').clone()
                    .attr('src', e.target.result);
                                $('.product-image').prepend(newimage)

                    
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="product_images" accept="image/*" name="product_images" onchange="readURL(this);">


<div class="product-image">
    <div class="form-group">
        <div class="Image-upload">
            <span class="image-option-close">&times;</span>
            <label for="product_images"> Upload Image </label>
            <img src="" id="image"  class="h-100" alt="">

           </div>
         </div>
       </div>

旧答案：

您需要为每个文件输入使用不同的名称属性，也可以使用数组简单地将其命名。只需在名称属性中添加后缀[]。例如：

<input type="file" id="product_images" accept="image/*" name="product_images[]" onchange="readURL(this);">

然后在您的控制器中编写如下内容：

foreach(request()->product_images as $image){
    $name = $image->getClientOriginalName();
    $image>move(public_path() . '/mytestfile/', $name); 
}

Answer 2

首先，您需要为class的预览使用img选择器，而不是id-因为id对于每个element必须是唯一的DOM。

第二，点击preview后，分别向image的每个Add-Product-Image添加img元素，以便我们可以使用此输入img预览在相关部分中。

要获取实际的img和closest输入，我们需要使用jQuery Prev()方法。

$(input).prev('img.image').attr('src', e.target.result)

实时工作演示：

$(function() {
  $(this).on('click', '#add-product-image', function() {
    var form = '<div class="form-group"><div class="Image-upload"><span class="image-option-close">&times;</span><label for="product_images" class="">Upload Image</label><br><img src="" class="image"style="width: 200px;height: 200px;" alt=""><input class="form-control" type="file" id="product_images[]" accept="image/*" name="product_images[]" onchange="readURL(this);"></div></div>';
    $('.product-image').append(form)
  });

  $(this).on('click', '.image-option-close', function() {
    var target_input = $(this).parent();
    target_input.remove();
  })
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $(input).prev('img.image').attr('src', e.target.result)
    };
    reader.readAsDataURL(input.files[0]);
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="product-image">
  <div class="form-group">
    <div class="Image-upload">
      <span class="image-option-close">&times;</span>
      <label for="product_images">Upload Image </label>
      <br>
      <img src="" class="image" style="width: 200px;height: 200px;" alt="">
      <input class="form-control" type="file" id="product_images[]" accept="image/*" name="product_images" onchange="readURL(this);">
    </div>
  </div>
</div>
<button id="add-product-image" class="btn btn-success">Add-Product-Image</button>

如何在上传之前预览多个图像的多个div-jQuery

2 个答案: