CODEWITHSUNDEEP
javascriptjqueryfrontend
Aytac
Aytac

Reputation: 335

Create input field dynamically

I have created input fields dynamically. After choosing file, I want to preview each image. But I can preview only first one. Run the code snippet below to understand me. I would be glad if someone can help me.

 $(document).ready(function () {
 $("#imageBrowes").change(function () {
var File = this.files;
if (File && File[0]) {
  ReadImage(File[0]);
 }
})
})
var ReadImage = function (file) {
var reader = new FileReader;
var image = new Image;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result;
image.onload = function () {
 var height = this.height;
 var width = this.width;
 var type = file.type;
 var size = ~~(file.size / 1024) + "KB";
 $("#targetImg").attr('src', _file.target.result);
 $("#description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
$("#imgPreview").show();
 var html = '';
 html += '<div class="col-md-6"> <div class="btn "> <input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple /> </div> <div id="imgPreview" class="thumbnail" style="display:none"> <img class="img-responsive img-fluid" id="targetImg" /> <div class="caption"> <a href="#" id="Clearphoto"><i class="fas fa-trash-alt"></i></a> <span id="description"></span> </div> </div> </div>';
$('#newRow').append(html);
 }
 }
}

    
<div id="newRow">
<div class="col-md-6">
<div class="btn ">
<input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple />
  </div>
 <div id="imgPreview" class="thumbnail" style="display:none">
 <img class="img-responsive img-fluid" id="targetImg" />
 <div class="caption">
 <a href="#" id="Clearphoto"><i class="fas fa-trash-alt"></i></a>
<span id="description"></span>
   </div>
   </div>
</div>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 0

Views: 58

Answers (1)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

What do you think of that solution?

$(document).ready(function() {
  attachFileChangeHandler()
})

function attachFileChangeHandler() {
  $(".imageBrowse").change(function() {
    var File = this.files;

    if (File && File[0]) {
      ReadImage($(this).parent().parent(), File[0]);
    }
  })
}

function createNewFileInput() {
  var html = '';
  html += `
  <div class="col-md-6">
   <div class="btn">
    <input type="file" name="Photo" class="inputfile imageBrowse" multiple />
   </div>
   <div class="thumbnail imgPreview" style="display:none">
   <img class="img-responsive img-fluid targetImg"/> <div class="caption">
   <a href="#" id="Clearphoto">
   <i class="fas fa-trash-alt"></i></a>
    <span class="description"></span>
    </div>
    </div>
  </div>`;
  $('#newRow').append(html);

  setTimeout(attachFileChangeHandler, 100)
}

var ReadImage = function(parent, file) {
  var reader = new FileReader;
  var image = new Image;

  reader.readAsDataURL(file);

  reader.onload = function(event) {
    var data = event.target.result;
    image.src = data;

    image.onload = function() {
      var height = this.height;
      var width = this.width;
      var type = file.type;
      var size = ~~(file.size / 1024) + "KB";
      parent.find(".targetImg").attr('src', data);
      parent.find(".description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
      parent.find(".imgPreview").show();

      createNewFileInput();
    }
  }
}
<div id="newRow">
  <div class="col-md-6">
    <div class="btn ">
      <input type="file" name="Photo" class="inputfile imageBrowse" multiple />
    </div>
    <div class="thumbnail imgPreview" style="display:none">
      <img class="img-responsive img-fluid targetImg" />
      <div class="caption">
        <a href="#" id="Clearphoto">
          <i class="fas fa-trash-alt"></i>
        </a>
        <span class="description"></span>
      </div>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 2

Related Questions