上传文件前使用 JavaScript 显示预览图片

Question

I have a little script for uploading images with PHP and showing a preview picture before click "upload".我有一个小脚本，用于使用 PHP 上传图像并在单击“上传”之前显示预览图片。 It uses an input "multiple" for upload multiple files... So done, it works fine, but I have a little problem...它使用输入“多个”来上传多个文件...完成，它工作正常，但我有一个小问题...

When I duplicate the input type="file" (and erase Multiple ) with two, three or more inputs, PHP processes the uploaded files but JavaScript shows the first picture only...当我使用两个、三个或更多输入复制input type="file" （并擦除Multiple ）时， PHP 处理上传的文件，但 JavaScript 仅显示第一张图片...

How can I show a picture for all the inputs?如何显示所有输入的图片？

This is my script:这是我的脚本：

index.php index.php

    <?php include("file-upload.php"); ?>

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

  <title>PHP 7 Upload Multiple Files Example</title>
  <style>
    .container {
      max-width: 450px;
    }
    .imgGallery img {
      padding: 8px;
      max-width: 100px;
    }    
  </style>
</head>

<body>

  <div class="container mt-5">
    <form action="" method="post" enctype="multipart/form-data" class="mb-3">
      <h3 class="text-center mb-5">Upload Multiple Images in PHP 7</h3>

      <div class="user-image mb-3 text-center">
        <div class="imgGallery"> 
          <!-- Image preview -->
        </div>
      </div>

      <div class="custom-file">
        <input type="file" name="fileUpload[]" class="custom-file-input" id="chooseFile" multiple>
        <label class="custom-file-label" for="chooseFile">Select file</label>
      </div>

      <button type="submit" name="submit" class="btn btn-primary btn-block mt-4">
        Upload Files
      </button>
    </form>

    <!-- Display response messages -->
    <?php if(!empty($response)) {?>
        <div class="alert <?php echo $response["status"]; ?>">
           <?php echo $response["message"]; ?>
        </div>
    <?php }?>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

  <script>
    $(function() {
    // Multiple images preview with JavaScript
    var multiImgPreview = function(input, imgPreviewPlaceholder) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                }

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

    };

      $('#chooseFile').on('change', function() {
        multiImgPreview(this, 'div.imgGallery');
      });
    });    
  </script>
</body>
</html>

Answer 1

The #chooseFile CSS selector selects by ID - that's what the # does. #chooseFile CSS 选择器按 ID 选择 - 这就是#的作用。 IDs must be unique in HTML (obviously, because the whole point of an ID is to uniquely identify something). ID 在 HTML 中必须是唯一的（显然，因为 ID 的全部意义在于唯一标识某物）。 So to make that select several input elements, you'd be best to use a class instead as the selector.因此，要使 select 成为多个input元素，您最好使用 class 作为选择器。

For example:例如：

 $(function() { // Multiple images preview with JavaScript var multiImgPreview = function(input, imgPreviewPlaceholder) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder); } reader.readAsDataURL(input.files[i]); } } }; $('.chooseFile').on('change', function() { console.log("detected change"); multiImgPreview(this, 'div.imgGallery'); }); });

 .imgGallery img { padding: 8px; max-width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-file"> <input type="file" name="fileUpload[]" class="custom-file-input chooseFile"> <label class="custom-file-label" for="chooseFile">Select file</label> </div> <div class="custom-file"> <input type="file" name="fileUpload[]" class="custom-file-input chooseFile"> <label class="custom-file-label" for="chooseFile">Select file</label> </div> <div class="custom-file"> <input type="file" name="fileUpload[]" class="custom-file-input chooseFile"> <label class="custom-file-label" for="chooseFile">Select file</label> </div> <div class="imgGallery"> <!-- Image preview --> </div>

You might find jQuery's documentation about selectors is useful background reading: https://api.jquery.com/category/selectors/您可能会发现 jQuery 关于选择器的文档对背景阅读很有用： https://api.jquery.com/category/selectors/

上传文件前使用 JavaScript 显示预览图片

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-04-21 13:16:03

上传文件前使用 JavaScript 显示预览图片

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-04-21 13:16:03

解决方案1
0 已采纳 2021-04-21 13:16:03