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 you have read our privacy policy.

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