Displaying photo after uploaded Using Ajax - Laravel - ajax

Question

I need a help please
My question is : How can I display image after uploaded it in the same Page
I'm trying a lot of code , but nothing is worked for me
Here is blade code
<form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
enctype="multipart/form-data" id ="upload_form">
#csrf
<div class="row justify-content-center">
<div class="col-xl-9">
<!--begin::Wizard Step 1-->
<div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
<h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
<!--begin::Group-->
<div class="form-group row">
<label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
<div class="col-lg-9 col-xl-9">
<div class="image-input image-input-outline" id="kt_user_add_avatar">
<div class="image-input-wrapper" >
<img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
</div>
<!--end::Group-->
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
Cancel
</div>
</div>
</div>
</div>
</div>
</form>

Answer 1

Try this: (For Preview)
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />