Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

How to change image on change in jQuery ?

In this tutorial we’re going to learn how to change image on change i have to use the change() event is attached to the imageList select element using jQuery. When the user selects a different image from the list, the change() event handler is triggered. The change() event handler gets the value of the selected image from the this keyword and sets the src attribute of the image element to the value of the image.

1 step use cdn

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

2nd step put form code in view file

<form action="">                   
<div class="row mb-3">
	<label for="example-text-input" class="col-sm-2 col-form-label">Profile
		Image</label>
	<div class="col-sm-10">
		<input name="profile_image" id="image" type="file" class="form-control"
			placeholder="">
	</div>
</div>
<div class="row mb-3">
	<label for="example-text-input" class="col-sm-2 col-form-label">Pic</label>
	<div class="col-sm-10">
		<img id="showImage" class="rounded avatar-lg"
			src="{{ asset('assets/images/small/img-5.jpg') }}" alt="card image cap">
	</div>
	<div class="col-lg-2">
		<input type="submit" class="btn btn-primary" value="Update Profile">
	</div>
</form>

3rd step use below script

<script type="text/javascript">
        $(document).ready(function() {
            $('#image').change(function() {
                var reader = new FileReader();
                reader.onload = function(event) {
                    $('#showImage').attr('src', event.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            });
        });
    </script>

Output:-

Hi I am Amit Kumar Thakur Experienced as s Software Developer with a demonstrated history of working in the information technology and services industry. Skilled in HTML, CSS, Bootstrap4, PHP, Laravel-9 , REST API,FB API,Google API, Youtube Api, Bitbucket,Github,Linux and jQuery. Strong engineering professional focused in Computer/Information Technology Administration and Management. Currently my profile is to Software Developer, analyze the requirement, creating frame for web application, coding and maintenance.

Related Posts

How to print Array data in console.log in laravel ?

In this tutorial im going to learn how to print how many data is coming in array. 1st step go to your blade page and put below…

How to Use jQuery to Validate an Empty Input Field in laravel ?

jQuery is still a strong and popular JavaScript library for processing user input and providing interactivity to online projects. It is the best option for implementing client-side…

How to Get On click Data id using getAttribute() method ?

In this tutorial I’m going to learn how to get onclick get data id using JavaScript get id of the element that has the onclick event. javascript…

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x