Amalmax
1 year ago

how to display file input buttons multiple times with image previwe?

Posted 1 year ago by Amalmax

I am working with laravel 5.6 and I have image upload button with my form. currently it is using upload single file with image thumbanail previwe.

<div class="form-group row required"> 
            <div class="field" align="left" >
            <h3>Upload  images</h3>
            <input type="file" id="files" name="files[]" multiple />
</div>
        </div>

jquery

<script >
    $(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"remove\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".remove").click(function(){
            $(this).parent(".pip").remove();
          });
          });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
    
 </script>

css

input[type="file"] {
  display: block;
}
.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}
.pip {
  display: inline-block;
  margin: 10px 10px 0 0;
}
.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}
.remove:hover {
  background: white;
  color: black;
}

now I add another upload input to same form like this,

<div class="form-group row required">
            <div class="field" align="left" >
            <h3>Upload  images</h3>
            <input type="file" id="files" name="files[]" multiple />
            <input type="file" id="files" name="files[]" multiple />//new one
            </div>

            
        </div>

then first upload button can appear image thumbanail but second file input did not display thumbanails.....what is the problem. how can fix this problem?

Please sign in or create an account to participate in this conversation.