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

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?

newbie360

7 years ago

Level 24

just make a sample, i don't know if this you looking for

sample page : http://os33.atwebpages.com/multiple_upload_image_preview.html

    <div class="container w-50">
        <img class="border border-dark rounded" data-preview="p1" src="/default_avatar.png" width="170" height="170">
        <h6 data-file-name="p1"></h6>
        <label class="btn btn-secondary" for="p1">
            <input type="file" id="p1" name="file[]" accept=".jpg" style="display:none">
            Upload
        </label>

        <br><br>

        <img class="border border-dark rounded" data-preview="p2" src="/default_avatar.png" width="170" height="170">
        <h6 data-file-name="p2"></h6>
        <label class="btn btn-secondary" for="p2">
            <input type="file" id="p2" name="file[]" accept=".jpg" style="display:none">
            Upload
        </label>
    </div>

    <script type="text/javascript">
        $(function() {

            $('input[type=file]').change(function() {
                var id = $(this).attr('id');
                var uploadFileName = this.files[0].name;
                var strLimit = 20;
    
                //
                // prevent a long string file name
                //
                if (uploadFileName.length > strLimit) {
                    var endOfFileName = uploadFileName.substr( (uploadFileName.lastIndexOf('.') -2) );
                    var startOfFileName = uploadFileName.substr(0, (strLimit - endOfFileName.length - 3));
                    uploadFileName = startOfFileName+"..."+endOfFileName;
                }
    
                //
                // show file name
                //
                $('[data-file-name="' + id + '"]').html(uploadFileName);
    
                //
                // show image preview
                //
                var reader = new FileReader();
                reader.readAsDataURL(this.files[0]);
    
                reader.onload = function(e) {
                    $('[data-preview="' + id + '"]').attr('src', e.target.result);
                };
            });

        });
    </script>

Please or to participate in this conversation.