Как загрузить изображение на HTML страницу?

245

10 апреля 2018, 01:59

При выборе изображения нужно загрузить его на HTML страницу. Изображение на странице не отображается( Как исправить?

HTML

<input type="file" id="Photo" name="Photo" accept="image/*" onchange="previewPhoto(this)"/>
<img id="previewPhoto" class="previewPhoto" src="~/App_Files/Images/default.png"/>

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

Javascript

    function previewPhoto(photo) {
        var reader = new FileReader();
        reader.onload = function () {
            var output = document.getElementById('previewPhoto');
            output.src = reader.result;
        }
        reader.readAsDataURL(photo.target.files[0]);
    }

Answer 1

function previewPhoto() { 
  var preview = document.querySelector('#previewPhoto'); 
  var file = document.querySelector('input#Photo[type=file]').files[0]; 
  var reader = new FileReader(); 
 
  reader.onloadend = function() { 
    preview.src = reader.result; 
  } 
 
  if (file) { 
    reader.readAsDataURL(file); 
  } else { 
    preview.src = ""; 
  } 
}

#previewPhoto { 
  border: 1px solid; 
  width: 150px; 
  height: 100px 
}

<input type="file" id="Photo" name="Photo" accept="image/*" onchange="previewPhoto()" /> 
<img id="previewPhoto" class="previewPhoto" src="~/App_Files/Images/default.png" />

объект FileReader

пример взят здесь