重用 javascript 函数来显示多个图像预览答案

【问题标题】：Reuse java script function to Show Multiple Images Preview重用 javascript 函数来显示多个图像预览
【发布时间】：2016-06-08 17:12:42
【问题描述】：

你好！

我编写了单个 java 脚本函数来在上传之前显示图像预览。对于单个文件上传，我的代码工作正常。

但现在我想通过为用户提供多个选择选项来提供多个图像上传选项（请参阅快照）。同样为此，我想重用显示所选第一张图像预览的功能。（请参阅快照中的图像）

我将如何修改我的 html 代码以及如何重用我的脚本函数？

html

<form action="upload.php" method="post" enctype="multipart/form-data">
    <div id="wrapper" style="margin-top: 20px;">
    <input id="fileUpload"  name="uploadedFile" type="file"/> 
    <input  id="fileUpload2"  name="" type="file"/> 
    <input id="fileUpload3"  name="uploadedFile" type="file"/> 
    <div id="image-holder"></div>

</div>
</form>

Javascript

<script>
$(document).ready(function() {
        $("#fileUpload").on('change', function() {
          //Get count of selected files
          var countFiles = $(this)[0].files.length;
          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();
          if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
              //loop for each file selected for uploaded.
              for (var i = 0; i < countFiles; i++) 
              {
                var reader = new FileReader();
                reader.onload = function(e) {
                  $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                  }).appendTo(image_holder);
                }
                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              alert("This browser does not support FileReader.");
            }
          } else {
            alert("Pls select only images");
          }
        });
      });
</script>

【问题讨论】：

在大多数情况下，您应该使用严格相等 === 而不是松散相等 ==，因为它不会让您记住大量的强制规则。
感谢您的建议，但我要求将同一段代码用于多个文件选择。你有什么想法吗？
对不起，我没有回答你的问题，我只是提出一般性建议。
好的，亲爱的。不客气！

标签： javascript jquery html image-uploading jquery-file-upload

【解决方案1】：

这就是类的用途。您只是在 fileUpload Id 上调用您的 jQuery。如果您要为多个这样的图像使用同一个图像支架，您不应该每次都将其清除。

我对您的代码进行了少量重构。试试这个。

html

<form action="upload.php" method="post" enctype="multipart/form-data">
<div id="wrapper" style="margin-top: 20px;">
    <input class="fileUploadClass" id="fileUpload"  name="uploadedFile" type="file"/>
    <input class="fileUploadClass" id="fileUpload2"  name="" type="file"/>
    <input class="fileUploadClass" id="fileUpload3"  name="uploadedFile" type="file"/>
    <div id="image-holder"></div>

</div>

JavaScript

<script>
$(document).ready(function() {
    $(".fileUploadClass").on('change', function() {
        //Get count of selected files
        var countFiles = $(this)[0].files.length;
        var imgPath = $(this)[0].value;
        var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
        var image_holder = $("#image-holder");
       // image_holder.empty();
        if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {
                //loop for each file selected for uploaded.
                for (var i = 0; i < countFiles; i++)
                {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $("<img />", {
                            "src": e.target.result,
                            "class": "thumb-image"
                        }).appendTo(image_holder);
                    }
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[i]);
                }
            } else {
                alert("This browser does not support FileReader.");
            }
        } else {
            alert("Pls select only images");
        }
    });
});

【讨论】：