ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Пользовательская загрузка файла для сайта

Пользовательская загрузка файла для сайта

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

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

Как сделать загрузку файла для сайта на HTML + JS


Если вы разбираетесь в JavaScript, это может стать вариантом для создания собственного, оригинального пользовательского интерфейса загрузки файлов.

Установка:

HTML

Код
</span><div class="agusayem_sayta">
  <input class="agusayem_sayta__input" type="file" name="myFile[]" id="myFile" multiple>
  <button class="agusayem_sayta__button" type="button">Выберите файл(ы)</button>
  <span class="agusayem_sayta__label"></span>
</div>

CSS

Код
.agusayem_sayta {
  display: flex;
  justify-content:center;
  align-items: center;
  font-size: 15px;
}

.agusayem_sayta__input {
  display: none;
}

.agusayem_sayta__button {
  -webkit-appearance: none;
  background: #009879;
  border: 2px solid #00745d;
  border-radius: 4px;
  outline: none;
  padding: 0.5em 0.8em;
  margin-right: 15px;
  color: #ffffff;
  font-size: 1em;
  font-family: "Quicksand", sans-serif;
  font-weight: bold;
  cursor: pointer;
}

.agusayem_sayta__button:active {
  background: #00745d;
}

.agusayem_sayta__label {
  max-width: 250px;
  font-size: 0.95em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Quicksand", sans-serif;
}

JS

Код
Array.prototype.forEach.call(
  document.querySelectorAll(".agusayem_sayta__button"),
  function(button) {
  const hiddenInput = button.parentElement.querySelector(
  ".agusayem_sayta__input"
  );
  const label = button.parentElement.querySelector(".agusayem_sayta__label");
  const defaultLabelText = "Файлы не выбраны";

  // Set default text for label
  label.textContent = defaultLabelText;
  label.title = defaultLabelText;

  button.addEventListener("click", function() {
  hiddenInput.click();
  });

  hiddenInput.addEventListener("change", function() {
  const filenameList = Array.prototype.map.call(hiddenInput.files, function(
  file
  ) {
  return file.name;
  });

  label.textContent = filenameList.join(", ") || defaultLabelText;
  label.title = label.textContent;
  });
  }
);

Рядом с кнопкой можно заметить надпись "Файлы не выбраны", но как только вы выберете файл и перетащите его с компьютера на сайт, то запись исчезнет, а вместо ее появится название данного файла.

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

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

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

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

Комментарии: 1
Kosten
Kosten 22 Июня 2023 14:361
0
Если вам требуется данная функция, только под другим дизайн, то в данном материале представлен аналогичный по функциям скрипт.
avatar