Стильная CSS-кнопка с предварительным просмотром изображений для загрузки файлов

Чтобы создать стильную CSS-кнопку с предварительным просмотром изображения для загрузки файлов, вы можете выполнить следующие шаги:

Демо

• TechieBundle

HTML

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

<!-- tb is acronym for TechieBundle -->
<div class="tb-container">
  <div class="tb-img-view">
    <img id="tb-image" />
  </div>
  <label for="tb-file-upload">Upload Image</label>
  <input type="file" id="tb-file-upload" accept="image/*" onchange="fileUpload(event);" />
</div>

CSS

Добавьте следующие правила CSS для оформления кнопки загрузки файла и предварительного просмотра изображения:

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 background: #2b5876;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);;
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
a {
  text-align: center;
  color: #252525;
  text-align: center;
  color: #ffffff;
  width:100%;
}
h1 {
  margin-right:auto;
  margin-left:auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #ffffff;
  width:50%;
}
.tb-img-view {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tb-container {
  width: 100%;
  margin: 4em auto;
}
.tb-container img {
  width: 200px;
  height: auto;
  display: none;
  margin-bottom: 30px;
}
.tb-container input {
  display: none;
}
.tb-container label {
  width: 200px;
  height: 45px;
  background: #2f9c74;
  color: #ffffff;
  font-size: 15px;
  text-transform: capitalize;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
}

JS

Наконец, добавьте следующий код JavaScript для отображения предварительного просмотра загруженного изображения:

const fileUpload = (event) => {
  const files = event.target.files;
  const filesLength = files.length;
  if (filesLength > 0) {
    const imageSrc = URL.createObjectURL(files[0]);
    const imagePreviewElement = document.querySelector("#tb-image");
    imagePreviewElement.src = imageSrc;
    imagePreviewElement.style.display="block";
  }
};

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

Используемые технологии

• HTML / CSS / JavaScript

О коде

Совместимые браузеры:- Chrome, Edge, Firefox, Opera, Safari

Отзывчивый:- Да

Зависимости:- Н/Д

Примечание:

Пожалуйста! Я рад, что статья оказалась для вас полезной. Если у вас остались вопросы или вам нужна дополнительная помощь, не стесняйтесь задавать их в разделе комментариев.