重用java脚本功能来显示多个图像预览

时间:2016-06-08 17:12:42

标签: javascript jquery html5 image-uploading jquery-file-upload

enter image description here

您好!

我编写了单个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>

1 个答案:

答案 0 :(得分:0)

这是课程的用途。您只是在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");
        }
    });
});