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

您好！

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

来源

2016-06-08 bc110402307 Syed Zeeshan Haide

你应该用严格的平等''===而不是宽松平等''==在大多数情况下，它并没有让你记住强制规则。 – gcampbell

感谢您的建议，但我正在询问如何使用同一段代码进行多个文件选择。你有什么想法吗？ –

对不起，我没有回答你的问题，我只是提出一个普遍的建议。 – gcampbell

这是什么类是。你只是在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"); 
     } 
    }); 
});

来源

2016-06-09 00:35:12

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

回答

相关问题