When you add the listener the dynamic inputs not exist yet, so they not have this listener.
What you can do is add to them onchange="myfunction(this)" as below:
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(document).on('click', '#addMoreEntry', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".work").append("<div class='workBoxFormWrapper form-bottom-border'><h3 class='text-red text-upper'>Entry 1</h3><div class='row'><div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span><div class='insert-img d-table'> <img src='assets/images/upload-img.png' alt='user-img' class='show-uploaded-img'><div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic' onchange='workimage_preview(this)'><label for='work_pic' class='text-underline openbrowse'> Upload</label></div></div></div></div></div>")
}
});
//Once remove button is clicked
$('.work').on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
function workimage_preview(input) {
if (input.files && input.files[0]) {
var $input = $(input);
var reader = new FileReader();
reader.onload = function(e) {
$input.closest('.workBoxFormWrapper').find('.show-uploaded-img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".work_pic").change(function() {
workimage_preview(this);
//alert('hello');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="work">
<div class='workBoxFormWrapper form-bottom-border'>
<h3 class='text-red text-upper'>Entry 1</h3>
<div class='row'>
<div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span>
<div class='insert-img d-table'> <img src='assets/images/upload-img.png' alt='user-img' class='show-uploaded-img'>
<div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'> <label for='work_pic' class='text-underline openbrowse'> Upload</label></div>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" id="addMoreEntry"> + Click to add more entry</a>
I am displaying file type dynamically on clicking on the anchor tag. I am able to preview the image in the first file type but not able to preview in the second file type which is displaying dynamically. I am getting only the image name.
I am getting the output.
Check this below image. In the first file type image displaying but in the second file type, the only name is displaying.
Would you help me out with this?
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(document).on('click', '#addMoreEntry', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".work").append("<div class='workBoxFormWrapper form-bottom-border'><h3 class='text-red text-upper'>Entry 1</h3><div class='row'><div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span><div class='insert-img d-table'> <img src='https://www.rabata.org/wp-content/uploads/2018/05/dummy.png' alt='user-img' class='show-uploaded-img'><div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'><label for='work_pic' class='text-underline openbrowse'> Upload</label></div></div></div></div></div>")
}
});
//Once remove button is clicked
$('.work').on('click', '.remove_button', function(e) {
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
function workimage_preview(input) {
if (input.files && input.files[0]) {
var $input = $(input);
var reader = new FileReader();
reader.onload = function(e) {
$input.closest('.workBoxFormWrapper').find('.show-uploaded-img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".work_pic").change(function() {
workimage_preview(this);
//alert('hello');
});
<div class="work">
<div class='workBoxFormWrapper form-bottom-border'>
<h3 class='text-red text-upper'>Entry 1</h3>
<div class='row'>
<div class='col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12'> <span>Please upload the image</span>
<div class='insert-img d-table'> <img src='https://www.rabata.org/wp-content/uploads/2018/05/dummy.png' alt='user-img' class='show-uploaded-img'>
<div class='d-table-cell findbrowse'> <input type='file' name='work_pic[]' class='work_pic'> <label for='work_pic' class='text-underline openbrowse'> Upload</label></div>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" id="addMoreEntry"> + Click to add more entry</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@SimoneBroili, I added my code in the snippet. Same code I am using it. Where should I append it?
@SimoneBroili, I updated my snippet. What I am doing is, I am displaying a dummy image first on load then the user can upload the image.
