Предварительный просмотр изображения перед его загрузкой на сервер обеспечивает пользователю лучшее взаимодействие с интерфейсом сайта. В нашем примере для реализации предпросмотра будем использовать HTML, CSS и jQuery.

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

<input type="file" accept="image/*" id="image-upload" />
<figure>
  <img id="image" />
</figure>
<button id="upload-btn">Загрузить</button>
<button id="cancel-btn">Отменить</button>

Подключаем jQuery и добавляем следующий скрипт:

// Событие при добавлении картинки
$("#image-upload").on("change",function(){
  // Обрабатываем объект добавленного изображения
  var $input = $(this),
      reader = new FileReader(); 
  reader.onload = function(){
    $("#image").attr("src", reader.result);
  };
  reader.readAsDataURL($input[0].files[0]);
});

// Функция отрабатывает по клику на "загрузить картинку"
$("#upload-btn").on("click",function(){
  // тело для логики функции
});

// Функция отрабатывает по клику на "отменить загрузку"
$("#cancel-btn").on("click",function(){
  // Обнуляем значение input и удаляем картинку
  $('#image-upload').val("");
  $('#image').attr("src","");
});