Hi, First you need to set an onclick event with a function name. Like:
<div> <button type="button" name="button" class="btn btn-success" id="editbtn" onclick="edit_image()" data-id="<?php echo $image[0]->image_id; ?>" data-image="<?php echo $image[0]->image_name; ?>"> <span class="fa fa-edit" ></span> Edit </button> </div>
If you do it so follow the below example:
Define a image tag below the input file and give a ID name of image tag,
For example:
<input type="file" class="form-control" id="new_img" name="new_img"> <img src="" alt="" id="image_show" style="width: 50%;">
Use this jquery method:
<script> function edit_image(){ var edit_img = $('#editbtn').data('image'); $('#edit_cat_image').attr('src','images/upload_image/'+edit_img); } </script>
New Image Show:-
<script> $('#new_img').change(function(){ readURL(this); }); function readURL(input){ if(input.files && input.files[0]){ var reader= new FileReader(); reader.onload = function(e){ $('#image_show').attr('src',e.target.result); } reader.readAsDataURL(input.files[0]); } } </script>
Question and answer is powered by AnsPress.io