1

I'm trying to get a file to change the shape and change the image to what the person inserted.

 <label for="avatarinput">
 <img id="avatar" class="image" style="border-radius: 50%;" height="150" width="150" id="createForm" src= <%= image_url %> >
 </label>
  <input type="file" id="avatarinput"  multiple accept=".jpg,.jfif,.jpeg,.png,.gif" name="filedata" /><br><br>

<script>
$("input[type=file]").on('change',function(){
    let file = $(this).val();
    $('#avatar').attr('src', file);
});
</script>

Not allowed to load local resource: file:///C:/fakepath/scale_1200.jfif

DiscordMedved
  • 35
  • 3
  • This might help: https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource – Suraj Sanwal Apr 30 '22 at 05:48

1 Answers1

0

You should use FileReader for read file from the client and set it on img.src Attr.

     $("input[type=file]").on('change',function(element){
            let file = element.target.files[0];
  
             // FileReader support
             if (FileReader && file) {
                var fr = new FileReader();
                 fr.onload = function () {
                     $('#avatar').attr('src', fr.result);
                 }
                 fr.readAsDataURL(file);
             }}
        );
thisisnabi
  • 1,045
  • 9
  • 21