ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Кнопка загрузки файлов на сайте в JS + CSS

Кнопка загрузки файлов на сайте в JS + CSS

Кнопка загрузки файлов на сайте в JS + CSS
В данном материале описано про оригинальный подход оригинальной кнопки, что идет на запуск загрузки файла при нажатии на кнопку с помощью JavaScript. Как понимаете, то здесь мы задействуем данный ввод для передачи файла с нашего компьютера в браузере. Если брать любой сайт, то там кнопка будет стандартная, что большинство не подходят под основной стиль сайта или дизайна. Возможно многих раздражает стандартные, где даже не сильно аккуратный вид кнопки, а здесь можно все красиво оформить, где поставить красивую кнопку, где присутствует функционал открытие окна для выбора файла на вашем компьютере.

Если кратко говорить, то это пользовательская кнопка, так как основном данной функцией будут пользоваться гости и пользователи сайта. Здесь создан плоское стиль дизайна для загрузки, где задействовали лишь немного CSS и JavaScript. Оно заимствовано из тенденции плоского дизайна, который позволяет избежать градиентов, сосредоточившись на отдельных цветах – часто с монохроматической цветовой схемой. Вы можете добавить этот дизайн загрузки файла на любую страницу, и он будет выглядеть великолепно.

Это изображение по умолчанию кнопки загрузки файлов:

Скрипт кнопки загрузок файлов на сайт

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

Создать пользовательскую кнопку загрузки файла в на CSS и JavaScri

Установка:

Здесь идет библиотека, а также скрипт на шрифтовые кнопки:

HEAD

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.3.1/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

HTML

Код
<div class="kudeas-obertka">
  <div class="sagruzka-obertka">
  <button class="btn zagruz-obertka font-weight-500">
  <span class="vesadekun">
  <i class="fas fa-cloud-upload-alt ademopes usko_nedsad pb-2"></i>
  Загрузить из папок
  </span>
  <span class="upload-select-button" id="blankFile">
  Поддерживает JPG, JPG2000 и PNG
  </span>
  <span class="lopedemas">
  <i class="far fa-check-circle text-lopedemas"></i>
  </span>
  </button>
  <input type="file" name="peres_dukilas" id="peres_dukilas">
  </div>
  </div>

CSS

Код
.kudeas-obertka{
  width:100%;
  margin:auto;
  height:100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .sagruzka-obertka{
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
  }
.zagruz-obertka {
  border: 2px dashed #bbb;
  color: #817676;
  background-color: #e7e6e6;
  width: 380px;
  height: 100px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
  .sagruzka-obertka input[type=file]{
  width:100%;
  position: absolute;
  left:0;
  right:0;
  top:0;
  opacity: 0;
  cursor: pointer;
  min-height: 300px;
  }
  .lopedemas{
  display:none;
  }
  .lopedemas i{
  font-size:22px;
  margin-left:6px;
  margin-top:10px;
  color:#00b665;
  }
  .usko_nedsad{
  font-size:50px;
  }
  .ademopes{
  display: block;
  }
  .btn .zagruz-obertka{
  font-size:14px;
  }
  .vesadekun{
  display: block;
  font-size:22px;
  color:#0049b6;
  }

JS

Код
$("#peres_dukilas").bind('change',function(){
  var filename = $("#peres_dukilas").val();
  if(/^s*$/.test(filename)){
  $("#blankFile").text("Файл не выбран..");
  $(".lopedemas").hide();
  }else{
  $("#blankFile").text(filename.replace("C:\\fakepath\\",""));
  $(".lopedemas").show();
  }
})

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

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

Демонстрация
18 Июня 2023 Загрузок: 3 Просмотров: 794 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 22 Июня 2023 14:351
0
Также рекомендую посмотреть аналогичный материал, разве только под другим дизайном, который находится здесь, для перехода.
avatar