получение изображения из ввода

Я пытаюсь получить файл, чтобы изменить форму и изменить изображение на то, что человек вставил.

 <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>

Не разрешено загружать локальный ресурс: file:///C:/fakepath/scale_1200.jfif

Решение проблемы

Вы должны использовать FileReader для чтения файла с клиента и установить его на 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);
 }}
 );