Кнопка загрузки файлов на сайте в JS + CSS
 | |
| В данном материале описано про оригинальный подход оригинальной кнопки, что идет на запуск загрузки файла при нажатии на кнопку с помощью JavaScript. Как понимаете, то здесь мы задействуем данный ввод для передачи файла с нашего компьютера в браузере. Если брать любой сайт, то там кнопка будет стандартная, что большинство не подходят под основной стиль сайта или дизайна. Возможно многих раздражает стандартные, где даже не сильно аккуратный вид кнопки, а здесь можно все красиво оформить, где поставить красивую кнопку, где присутствует функционал открытие окна для выбора файла на вашем компьютере. Если кратко говорить, то это пользовательская кнопка, так как основном данной функцией будут пользоваться гости и пользователи сайта. Здесь создан плоское стиль дизайна для загрузки, где задействовали лишь немного CSS и JavaScript. Оно заимствовано из тенденции плоского дизайна, который позволяет избежать градиентов, сосредоточившись на отдельных цветах – часто с монохроматической цветовой схемой. Вы можете добавить этот дизайн загрузки файла на любую страницу, и он будет выглядеть великолепно. Это изображение по умолчанию кнопки загрузки файлов:  А здесь уже можно наблюдать название файла, который переноситься:  Установка: Здесь идет библиотека, а также скрипт на шрифтовые кнопки: 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 вместе с кнопкой, так как данный функционал вызывает главную функцию окна. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
