[英]Image preview not working in Dynamic Add / Remove file upload fields
I have created Dynamic Add / Remove fields... Along with other fields there is an Image file field... Every thing is working well except the image preview. 我创建了“动态添加/删除”字段...除其他字段外,还有一个“图像文件”字段...除图像预览外,其他所有功能都运行良好。
The preview of first field is working well, but in other added fields the preview is not working... 第一个字段的预览效果很好,但是在其他添加的字段中,预览效果不佳...
I m not getting, where I m wrong... Plz help me... Thanks... 我不明白,我错了...请帮助我...谢谢...
Following is my Code: 以下是我的代码:
<div class="card">
<div class="card-header text-center">
<b>Team Members</b>
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0">
<br><br>
<label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>
</div>
<div class="col-8">
<div class="form-group">
<label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_name[]">
</div>
<div class="form-group">
<label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_email[]">
</div>
<div class="form-group">
<label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_role[]">
</div>
<div class="form-group">
<label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label>
<input type="text" class="form-control" name="member_fb[]">
</div>
</div>
</div>
<div id="team-member-fields">
</div>
<button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button>
</div>
</div>
<script type="text/javascript">
var i = 0;
function preview_member(event, inp) {
var reader = new FileReader();
console.log(inp);
reader.onload = function() {
var output = document.getElementById("output_member" + inp);
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
}
jQuery(document).ready(function($) {
//fadeout selected item and remove
$(document).on("click", "#remove-member-fields", function(event) {
event.preventDefault();
$(this)
.parent()
.fadeOut(300, function() {
$(this).empty();
return false;
});
});
//add input
$("#add-member-fields").click(function() {
i++;
var rows = '<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>';
$(rows)
.fadeIn("slow")
.appendTo("#team-member-fields");
return false;
});
});
</script>
Your rows variable is a bit mixed up with string literals and single quotation marks. 您的rows变量有点混在字符串文字和单引号中。
If you want to output a string like ${variablename} you have to put backticks around that string. 如果要输出$ {variablename}之类的字符串,则必须在该字符串周围加上反引号。 (see Template literals )
(请参阅模板文字 )
Check the follwing snippet (just surrounded the row string with backticks). 检查以下代码段(仅用反引号将行字符串包围)。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card"> <div class="card-header text-center"> <b>Team Members</b> </div> <div class="card-body"> <div class="row"> <div class="col-4"> <img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member0"> <br><br> <label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label> </div> <div class="col-8"> <div class="form-group"> <label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label> <input type="text" class="form-control" name="member_name[]"> </div> <div class="form-group"> <label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label> <input type="text" class="form-control" name="member_email[]"> </div> <div class="form-group"> <label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label> <input type="text" class="form-control" name="member_role[]"> </div> <div class="form-group"> <label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label> <input type="text" class="form-control" name="member_fb[]"> </div> </div> </div> <div id="team-member-fields"> </div> <button type="button" class="btn btn-success btn-block" id="add-member-fields">Add Member</button> </div> </div> <script type="text/javascript"> var i = 0; function preview_member(event, inp) { var reader = new FileReader(); console.log(inp); reader.onload = function() { var output = document.getElementById("output_member" + inp); output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); } jQuery(document).ready(function($) { //fadeout selected item and remove $(document).on("click", "#remove-member-fields", function(event) { event.preventDefault(); $(this) .parent() .fadeOut(300, function() { $(this).empty(); return false; }); }); //add input $("#add-member-fields").click(function() { i++; var rows = `<div class="member-fields"><div class="row"><div class="col-4"><img src="<?php echo esc_url( site_url('/wp-content/img/blank-image.png') ); ?>" class="img-thumbnail" id="output_member${i}"><br><br><label class="btn btn-success btn-block btn-file">Select Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div><div class="col-8"><div class="form-group"><label for="member_name"><b>Member Name</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]"></div><div class="form-group"><label for="member_email"><b>Email Address</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_email[]"></div><div class="form-group"><label for="member_role"><b>Role in Project</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]"></div><div class="form-group"><label for="member_fb"><b>Facebook Username</b> <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_fb[]"></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields">Remove Member</button></div>`; $(rows) .fadeIn("slow") .appendTo("#team-member-fields"); return false; }); }); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.