• Этот документ объясняет, как загрузить изображение и отобразить его, а также отображает загруженное изображение в модели, когда пользователь нажимает на него.
  • Это будет реализовано с помощью API FileReader.
  • FileReader API — это объект, позволяющий веб-приложениям асинхронно читать содержимое файлов, хранящихся на компьютере пользователя, используя объекты File для указания файла для чтения.

1.Создайте шаблон

Сначала мы создадим файл HTML с именем ImageUpload.html со следующим кодом:

<div class="uploader">

<span class="btn btn-default btn-file center-block" onclick="$('#filePhoto').click()">

Upload an Image … <input type="file" name="userprofile_picture" id="filePhoto" />

</span>

<br>

<img id="myImg" src="" />

</div>

Приведенный выше код делает следующее:

  • ‹input type="file" /› примет файл от пользователя.
  • Событие onClick используется для запуска функции handleImage в файле javascript при нажатии на элемент.
  • Тип ввода установлен на файл.
  • #filePhoto — это ссылка на ввод, по которому мы можем получить доступ к загруженным файлам.
  • Элемент ‹img› будет отображать загруженное изображение.

2. Создайте JS-файл

  • Далее мы создадим файл javascript с именем ImageUpload.js со следующим кодом:

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {

var filetype = imageLoader.files[0].type;

var reader = new FileReader();

reader.onload = function (event) {

if(filetype.indexOf("image") > -1){

$('.uploader img').attr('src',event.target.result);

}else if(filetype.indexOf("video") > -1){

$('.uploader video')[0].src =reader.result;

}

}

reader.readAsDataURL(e.target.files[0]);

}

Приведенный выше код выполняет следующие действия:

  • handleImage получает входной файл, который мы отправили из fileLoader
  • Далее мы проверяем тип загруженного файла, если это изображение и видео, и сохраняем тип файла в переменной fileType.
  • Если тип файла является изображением, мы установим элемент src в файле HTML на изображение, чтобы отобразить его.
  • Если тип файла — видео, мы установим элемент src в файле HTML на видео, чтобы отобразить его.
  • Вызывая readAsDataURL, мы можем получить представление base64 изображения или видео в функции обратного вызова addEventListener, на которую мы подписались ранее.

3. Создайте модальное изображение

На последнем шаге мы создадим модальное окно (диалоговое окно), которое по умолчанию скрыто. Мы используем JavaScript для запуска модального окна и отображения текущего изображения внутри модального окна при нажатии на него.

In ImageUpload.htmlмы реализуем следующее:

<div id="myModal" class="modal">

<span class="close">&times;</span>

<img class="modal-content" id="img01">

<div id="caption"></div>

</div>

In ImageUpload.jsмы реализуем следующее:

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = this.alt;

}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {

modal.style.display = "none";

}

В приведенном выше коде сначала мы получим модель, затем получим изображение и вставим его внутрь модального окна, также мы будем использовать его «альтернативный» текст в качестве подписи, затем мы получим элемент «span», который закрывает модальное окно, поэтому когда пользователь нажимает на ‹span› (x) модальное окно будет закрыто

Демо: