Мгновенный просмотр выбранного изображения в HTML без сабмита

Быстрый ответ

Чтобы немедленно отобразить изображение после его выбора, необходимо использовать сочетание HTML и JavaScript. Вам потребуется элемент <input> для выбора файла и <img> для отображения изображения. В качестве инструмента почтения файла используйте FileReader, который преобразует файл в формат DataURL, после чего обновите атрибут src у тега изображения. Пример кода:

<input type="file" onchange="document.getElementById('output').src = URL.createObjectURL(this.files[0])">
<img id="output">

Событие onchange инициирует предварительный просмотр, создавая временный URL, который используется элементом <img> в качестве значения атрибута src. Этот способ быстрый, простой и не требует дополнительной настройки FileReader.

Постепенное ухудшение: Поддержка старых браузеров

Если вы все еще используете старые версии браузеров, где функционал URL.createObjectURL недоступен, то в качестве замены уместно использовать FileReader. Код получится немного длиннее, но метод будет стабильным:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      $('#imagePreview').attr('src', e.target.result);
    };
    reader.readAsDataURL(input.files[0]);
  }
}

$("#fileInput").change(function() {
  readURL(this);
});

И соответствующий HTML:

<input type="file" id="fileInput">
<img id="imagePreview" src="#" alt="Ваше изображение" />

Улучшение пользовательского опыта с применением библиотек

Чтобы улучшить интерактивность, рекомендуется использовать библиотеки вроде jQuery-File-Upload или JavaScript-Load-Image, которые предлагают дополнительные возможности редактирования изображений, например, изменение размера или кадрирование.

Загрузка только изображений

Чтобы ограничить загрузки только изображениями, используйте атрибут accept:

<input type="file" accept="image/gif, image/jpeg, image/png" onchange="readURL(this)">

Такой подход защитит сервер от несоответствующих файлов.

Визуализация

Рассматривайте процесс выбора изображения как волшебный акт. Сначала вы подготавливаете "сцену":

<input type='file' onchange='showImage(this)'>

Позже произносите "заклинание":

function showImage(input) {
  var reader = new FileReader();
  reader.onload = function(e) {
    document.getElementById('image').src = e.target.result;
  };
  reader.readAsDataURL(input.files[0]);
}

И... Абракадабра! Выделенное изображение появляется на экране:

<img id='image' style='display: none;'>

Множественные предпросмотры и реализация миниатюр

Для расширения ваших волшебных способностей организуйте галерею миниатюр, используя HTML5:

function updateImageDisplay() {
  var gallery = document.getElementById('gallery');
  gallery.innerHTML = "";

  var curFiles = input.files;
  if(curFiles.length === 0) {
    var para = document.createElement('p');
    para.textContent = 'Файлы не выбраны';
    gallery.appendChild(para);
  } else {
    var list = document.createElement('ol');
    gallery.appendChild(list);

    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = 'Файл: ' + curFiles[i].name + ', размер: ' + returnFileSize(curFiles[i].size) + '.';
        var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);
        
        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = 'Файл ' + curFiles[i].name + ' не подходит. Выберите другой.';
        listItem.appendChild(para);
      }
      list.appendChild(listItem);
    }
  }
}

Такой тип визуальной обратной связи сделает пользовательский интерфейс более дружественным и привлекательным.

Обработка ошибок

Обработка ошибок осуществляется с помощью события onerror объекта FileReader:

reader.onerror = function(event) {
  console.error("Ошибка чтения файла. Код ошибки: " + event.target.error.code);
};

Обязательно уведомьте пользователя о проблеме, передайте информацию о неверном файле или ошибке доступа.

Полезные материалы

1. Использование файлов в веб-приложениях – Веб API | MDN — детальное руководство по работе с файлами в веб-приложениях.
2. <input type="file"> – HTML: HyperText Markup Language | MDN — руководство по элементу <input type="file">.
3. javascript – Предпросмотр изображения перед его загрузкой – Stack Overflow — примеры предпросмотра изображений.
4. Полное руководство по данным атрибутам | CSS-Tricks — статья о данных атрибутах в HTML.
5. HTML Стандарт — стандарт, описывающий все HTML элементы и их API.
6. HTML Стандарт – <img> Элемент для встраивания изображения — спецификации элемента <img>.
7. GitHub – blueimp/JavaScript-Load-Image — набор JavaScript функций для работы с изображениями в формате File или Blob.