Пользовательская загрузка файла для сайта
 | |
| Здесь представлена пользовательская загрузка файлов, которая выполнена при использование 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; }); } ); Рядом с кнопкой можно заметить надпись "Файлы не выбраны", но как только вы выберете файл и перетащите его с компьютера на сайт, то запись исчезнет, а вместо ее появится название данного файла. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
