How to show image on upload using Ajax ?
<!DOCTYPE html>
<html>
<body >
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<div class=”page-content”>
<div class=”container-fluid”>
<div class=”row”>
<div class=”col-12″>
<div class=”row mb-3″>
<label for=”example” class=”col-sm-2 col-form-label”>User Image</label>
<div class=”col-sm-10″>
<input name=’image’ class=”form-control” type=”file” placeholder=”Edit Name” id=”profileimage”>
</div>
</div>
<div class=”row mb-3″>
<div class=”col-sm-10″>
<img src=”https://www.w3schools.com/images/picture.jpg ” id=”showprofileimage”>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(“#profileimage”).change(function(e){
var reader = new FileReader();
reader.onload = function(e){
$(‘#showprofileimage’).attr(‘src’,e.target.result);
}
reader.readAsDataURL(e.target.files[‘0’]);
})
});
</script>
</body>
</html>
Top site ,.. amazaing post ! Just keep the work on !