1

При выборе изображения нужно загрузить его на 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]);
    }
4
  • я точно не уверен но по моему загружать на сервер должен серверный язык программирования .. вопрос больше к php относится
    – user33274
    9 апр 2018 в 7:59
  • @МаксимЛенский не на сервер а на странице отобразить 9 апр 2018 в 8:03
  • т.е изображение будет храниться не на сервере а где то из вне ?
    – user33274
    9 апр 2018 в 8:04
  • я тег один не прочитал - прошу прощения , asp не моё
    – user33274
    9 апр 2018 в 8:08

1 ответ 1

3

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

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

2
  • Выдает ошибку Uncaught TypeError: previewPhoto is not a function at HtmlInputElement.onchange 9 апр 2018 в 8:29
  • ищите ошибке в исходном коде - пример-то рабочий.
    – Kirill
    9 апр 2018 в 8:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.