Breaking News: Grepper is joining You.com. Read the official announcement!

auto load image with js

Zabir Emu answered on November 16, 2022 Popularity 1/10 Helpfulness 1/10

answer auto load image with js

auto load image with js

Comment

// auto load image

//first load jquery top of the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

//2nd take input feild and give id
<div class="row mb-3">
     <div class="col-sm-3">
          <h6 class="mb-0">Photo</h6>
     </div>
     <div class="col-sm-9 text-secondary">
          <input id="image" type="file" class="form-control image" name="photo">
      </div>
</div>

//3rd take another img feild and give id
 <div class="row mb-3">
      <div class="col-sm-3">
 			<label for="profileImage"></label>
      </div>
      <div class="col-sm-9 text-secondary">
            <img id="show_image" src="{{ Auth()->user()->photo_url == null ?  asset('uploads/Profile/no-thumbnail-image-placeholder-forums-blogs-websites-148010362.jpg') : $user->photo_url }}" alt="" width="110" style="border-radius: 50%">
       </div>
</div>

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: auto image javascript load

Link to this answer
Share Copy Link

Contributed on Nov 16 2022

Zabir Emu

0 Answers Avg Quality 2/10

auto load image with js

Contents

More Related Answers

auto load image with js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.