SM - Стильные решения для вашего сайта

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

Предварительный просмотр изображений перед загрузкой на HTML, CSS и JS


Добавьте вашему веб-проекту удобный и практичный функционал — предварительный просмотр изображений перед их загрузкой. С помощью HTML, CSS и jаvascript можно легко реализовать этот полезный инструмент, который улучшит пользовательский опыт.

Данный функционал позволяет пользователю увидеть, как изображение будет выглядеть после загрузки, прежде чем отправить его на сервер. Это особенно актуально для форм обратной связи, загрузки профилей, портфолио и других приложений, где важно визуальное подтверждение.

Преимущества использования предварительного просмотра изображений:

  • Улучшение взаимодействия с пользователем (UX);
  • Уменьшение ошибок при загрузке неправильных файлов;
  • Простота реализации и возможность кастомизации;
  • Адаптивный дизайн и кроссбраузерная поддержка.

Добавьте эту функцию на свой сайт, чтобы сделать его еще более интуитивно понятным и удобным для пользователей!

See the Pen Предварительный просмотр изображения перед загрузкой by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        
HTML

<div class="form">
  <h2>Предварительный просмотр изображения перед загрузкой</h2>
  <div class="grid">
    <div class="form-element">
      <input type="file" id="file-1" accept="image/*">
      <label for="file-1" id="file-1-preview">
        <img src="https://bit.ly/3ubuq5o" alt="">
        <div>
          <span>+</span>
        </div>
      </label>
    </div>
    </div>
  </div>

        
CSS

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}
body {
  font-family:"Raleway",sans-serif;
  background:#0C1321;
}
.form {
  margin:80px 0px 20px;
  padding:0px 50px;
}
.form h2 {
  text-align:center;
  color:#acacac;
  font-size:40px;
  font-weight:400;
}
.form .grid {
  margin-top:50px;
  display:flex;
  justify-content:space-around;
  flex-wrap:wrap;
  gap:20px;
}
.form .grid .form-element {
  width:200px;
  height:200px;
  cursor: pointer;
  box-shadow:0px 0px 20px 5px rgba(100,100,100,0.1);
}
.form .grid .form-element input {
  display:none;
}
.form .grid .form-element img {
  width:100%;
  cursor: pointer;
  height:100%;
  object-fit:cover;
}
.form .grid .form-element div {
  position:relative;
  height:40px;
  cursor: pointer;
  margin-top:-40px;
  background:rgba(0,0,0,0.5);
  text-align:center;
  line-height:40px;
  font-size:13px;
  color:#f5f5f5;
  font-weight:600;
}
.form .grid .form-element div span {
  font-size:40px;
}

        
JS

function previewBeforeUpload(id){ document.querySelector("#"+id).addEventListener("change",function(e){
    if(e.target.files.length == 0){
      return;
    }
    let file = e.target.files[0];
    let url = URL.createObjectURL(file);
    document.querySelector("#"+id+"-preview div").innerText = file.name;
    document.querySelector("#"+id+"-preview img").src = url;
  });
}
previewBeforeUpload("file-1");
// Telegram @FrontendPortal


pen-export-gOydgbm.zip
0 6.64 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 3 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU