errorqo errorqo - 26 days ago 4
HTML Question

Jquery, image showing after change input

Anyone can show me what is wrong with my code? It show picture after change input but still in first input

It changes only first input everytime

Here is the code



$(document).ready(function() {


function readURL(input, data) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function(e) {
var blah = '#blah' + data;
$(blah).attr('src', e.target.result);
}

reader.readAsDataURL(input.files[0]);
}
}

$(".active_file").change(function() {
var data = $(this).data('im');
var img_div = '#img_div' + data;
var img_id = '#image_id' + data;
$(img_id).html('<img id="blah' + data + '" src="#" alt="your image" />');
alert(data);
readURL(this, data);
data = data + 1;
$(this).removeClass('active_file');
$(img_div).after('<div class="col-md-2 img_div" id="img_div' + data + '" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im=' + data + '><label class="col-md-12 image " for="fileI" id = "image_id' + data + '"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');



});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">


<div class="col-md-6 gallery">
<div class="row galeria_row">
<div class="col-md-2 img_div" id="img_div1">
<input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
<label class="col-md-12 image " for="fileI" id="image_id1"> <i class="fa fa-cloud-upload"></i>
<br>Nahrať obrázok..</label>
</div>

</div>

</div>
</div>




Answer Source

You need to use delegate event of jQuery because your DOM is being updated in real time. So instead of doing:

 $(".active_file").change(function() {

do this

$(document).on('change', '.active_file', function(){

$(document).ready(function(){


function readURL(input,data) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        
        reader.onload = function (e) {
          var blah = '#blah' + data; 
            $(blah).attr('src', e.target.result);
        }
        
        reader.readAsDataURL(input.files[0]);
    }
}

$(document).on('change', '.active_file', function(){
  var data = $(this).data('im');
  var img_div = '#img_div' + data;
  var img_id = '#image_id' + data;
  $(img_id).html('<img id="blah'+data+'" src="#" alt="your image" />');
  alert(data);
    readURL(this,data);  
    data = data + 1;
      $(this).removeClass('active_file');
     $(img_div).after('<div class="col-md-2 img_div" id="img_div'+data+'" ><input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='+data+'><label class="col-md-12 image " for="fileI" id = "image_id'+data+'"> <i class="fa fa-cloud-upload"></i><br>Nahrať obrázok..</label></div>');



});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">


  <div class="col-md-6 gallery">
    <div class="row galeria_row">
      <div class="col-md-2 img_div" id="img_div1" >
        <input form="formid" name="file" type="file" id="fileI" class="inputfile active_file" data-im='1'>
        <label class="col-md-12 image " for="fileI" id = "image_id1"> <i class="fa fa-cloud-upload"></i>
          <br>Nahrať obrázok..</label>
      </div>
      
    </div>

  </div>
</div>