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

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>

旧答案：

每个文件输入需要不同的名称属性，或者您可以使用数组来简单地使用它。只需在 name 属性中添加后缀 [] 即可。示例：

<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

对于 DOM 中的每个

element

必须是唯一的。

其次，在单击

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>

Answer 3

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