Код?... Это просто!
php js Jquery JsPhp blog
ТЕГИ:
css (4)
js (87)

php (101)
js (87)
php date (19)
html (14)
online (14)
js slice (13)
encode (11)
js array (11)
php array (10)
js date (10)
engine (10)
hash (10)
dosite (9)
info (7)
php img (7)
jsphp (6)
Показать еще :

Стилизуем type="file" с примерами, пошагово

"стилизация input file", что такое "стилизация input file". Разные способы стилизовать input file - "input file изменить текст". О какой стилизации type="file" идет речь? Чтобы вы сразу поняли о каком оформлении идет речь смотри здесь.

Пошаговое оформление "input file".

  1. Стилизация "input file" - увеличение поля.
  2. Стилизуем "input file" - надпись в поле.
  3. Стилизация "input file", изменение надписи при перетаскивании.
  4. Скачать стилизованный "input file".
  5. Изменение текста "input file".
  6. Изменение текста "input file" + информация о имени файла.
  1. Стилизация "input file" - увеличение поля.

    Если вы возьмете "input file":

    <input type="file" name="uploadimg">

    То он выглядит довольно скучно! И мало того не эстетично!

    Для того, чтобы увеличить поле "input file" вам понадобится:

    Возьмем такой же "input file" и добавим туда class для дальнейшей стилизации:

    class="class_1"

    И где в него добавим display: block;, чтобы "input file" заполнил строку по всей ширине.

    Используем margin: auto; для установки нашего инпута посередине.

    Добавим border "border: 1px solid #d5d5d5;" для показа поля "input file".

    Добавим ширину - width: 400px;.

    Добавим высоту - height: 150px;.

    И чтобы "input file" не прилеплялся к бордюру сделаем внутренний отступ - padding: 20px;.

    Теперь можем собрать весь стилизованный "input file" вмесете:

    Код стилизации "input file" - увеличение поля:

    То, что я перечислил давайте соберем в один код:

    Html:

    <input type="file" name="uploadimg" class="class_1">

    Css:

    <style>

    input.class_1 {

    display: block;

    margin: auto;

    border: 1px solid #d5d5d5;

    width: 400px;

    height: 150px;

    padding: 20px;

    }

    </style>

    Пример стилизации "input file" - увеличение поля:

    В случае с примером "стилизации input file" разместим выше приведенный код прямо здесь:

    Вы уже можете перетащить сюда файл...good

  2. Стилизуем "input file" - надпись в поле.

    Следующий шаг нашей пошаговой стилизации поля "input file" - добавление надписи.

    Для этого вам понадобится:

    Весь код из предыдущего пункта изменим название класса + добавим "position: relative;", чтобы наша надпись не убежала, она буде у нас "position: absolute;".

    Добавим классу before.

    Позиционируем как абсолютное : position: absolute;.

    Ширину и высоту возьмём родительского блока.

    Текст поставим посередине -text-align: center;.

    Для установки текста посередине по вертикали используем line-height.

    Чтобы все буквы были заглавными используем text-transform.

    Установим стиль текста font-family, "system-ui" - использует стандартный шрифт на устройстве пользователя.

    И font-size = 16px;

    Html

    <input type="file" name="uploadimg" class="class_2">

    Css

    <style>

    input.class_2 {

    display: block;

    margin: auto;

    border: 1px solid #d5d5d5;

    width: 400px;

    height: 150px;

    padding: 20px;

    position: relative;

    }

    input.class_2::before {

    content: 'перетащите сюда файл';

    position: absolute;

    width: 400px;

    height: 150px;

    text-align: center;

    line-height: 150px;

    text-transform: uppercase;

    font-family: system-ui;

    font-size: 16px;

    }

    </style>

    Пример стилизации "input file" - надпись в поле:

    Разметим выше приведенный пример : "стилизации "input file" - надпись в поле"

  3. Стилизация "input file", изменение надписи при перетаскивании.

    Для того, чтобы изменять текст при перетаскивании файла в поле "input file" вам потребуется:

    Предыдущий пункт, изменим названия класса.

    Добавим еще парочку классов.

    Далее используем javascript, используем тему " drag and drop".

    Соберем весь код - его можно скачать здесь.

    Стилизация "input file", изменение надписи при перетаскивании.

    Разметим выше приведенный пример : "стилизации "input file" - изменение текста в поле "input file""

    Скачать стилизованный "input file", изменение надписи при перетаскивании.

    С тебя чашка кофе и забирай готовый скрипт в сборе!

  4. Изменение текста "input file".

    Для того, чтобы изменить текст в поле "input file" на ваш собственный текст вам потребуется:

    Html:

    Нам потребуется поле ввода ""input file":

    Используем input с type="file".

    Обязательно id.

    Сделаем его невидимым - display:none.

    <input type="file" id="getFile" style="display:none">

    Используем кнопку button с вашим произвольным текстом внутри кнопки:

    <button>Здесь ваш измененный текст в "input file"</button>

    Css:

    Добавим стили:

    style="display:block; width:300px; height:30px; cursor: pointer;"
    Javascript :

    Опять же в кнопку добавим (javascript):

    onclick="document.getElementById('getFile').click()"

    Соберем весь код изменения текста в поле "input file":

    Код изменения текста в поле "input file".

    Соберем весь код изменения текста в поле "input file" вместе:

    <button style="display:block; width:300px; height:30px; cursor: pointer;" onclick="document.getElementById('getFile').click()">Здесь ваш измененный текст в "input file"</button>

    <input type="file" id="getFile" style="display:none">

    Пример изменения текста в пол "input file".

    Разместим собранный код изменения текста в поле "input file" прямо здесь:

  5. Изменение текста "input file" + информация о имени файла.

    Выше я разобрал, как можно изменить текст в поле ввода "input file".

    НО! Далее возникает следующая проблемка... имя файла не видно и не понятно, а файл вообще выбран? Загружен!?

    Давайте исправим.. для этого вма понадобится...

    Html:

    Код "html" скопируем сверху...

    javascript из кнопки уберем, его переместим в отдельный тег script

    Изменим id.

    И добавим div для отправки названия файла.

    <button style="display:block; width:300px; height:30px; cursor: pointer;" id="id_button">Здесь ваш измененный текст в "input file"</button>

    <input type="file" id="getFile_2" style="display:none">

    <div id="idiv"></div>

    Javascript:

    При клике на кнопку button произведем пару действий:

    По onclick вызовем функцию, внутри разместим:

    Эмуляция на нажатия на кнопку input.

    И запускам наш цикл - "myLoop";

    id_button . onclick = function()

    {

    getFile_2 . click();

    myLoop();

    };

    Далее определим пару переменных - здесь обращаю ваше внимание про то как обратиться к тегу:

    idiv = document.getElementById('idiv');

    delay = '1000';

    Далее цикл, обращаю ваше внимание , продолжаем пока не будет выбран файл.

    При получении имени файла отправляем его с помощью innerHTML в див "idiv".

    function myLoop() {

    setTimeout(function() {

    if(getFile_2 . files[0]) idiv . innerHTML = getFile_2 . files[0].name;

    else myLoop();

    }, delay)

    }

    Нам осталось собрать весь код!

    Код изменения текста в "input file" + информация о имени файла.

    Html:

    <button style="display:block; width:300px; height:30px; cursor: pointer;" id="id_button">Здесь ваш измененный текст в "input file"</button>

    <input type="file" id="getFile_2" style="display:none">

    <div id="idiv"></div>

    Javascript:

    <script>

    idiv = document.getElementById('idiv');

    delay = '1000';

    function myLoop() {

    setTimeout(function() {

    if(getFile_2 . files[0]) idiv . innerHTML = getFile_2 . files[0].name ;

    else myLoop();

    }, delay)

    }

    id_button . onclick = function()

    {

    getFile_2 . click();

    myLoop();

    };

    </script>

    Пример изменения текста в "input file" + информация о имени файла.

    Далее вам остается протестировать весь тот код, что мы навояли сверху! И не забудь сказать спасибо<!



Теги:стилизация input file стилизация input type file стилизация file input css input type file css стилизация стилизация кнопки input file input type file css стилизация примеры увеличить input file как изменить текст в input file увеличить input file file input custom
jsphp.ru есть здесь:
Полезные ссылки:
ruweb
Я писал немного о ruweb.net!
Помочь проекту JsPhp.ru

Что можно сделать!?

Поделиться ссылкой! C друзьями или врагами!


Помочь проекту JSPHP.RU: Помочь проекту JSPHP.RU прокомментировать :

Скоро...


Мои Проекты :

Скоро...



О хостинге :

Скоро...


© jsphp.ru 2023 - 2024 , Аминев Марат. Контакты
Страница загружена за : 0.00715 секунд.