Дизайн multipart формы

@andr-xw · Регистрация: 05.03.2013

Студворк — интернет-сервис помощи студентам

<input type="file"> создает на страничке кнопку для выбора файла и текстовое поле с именем файла. Но выглядит все это через жопу. Да ещё и во всех браузерах по разному, общее только одно - везде это выглядит через жопу.

Применить стили я не могу, поскольку они применяются к текстовому полю, а кнопка остается такой же, да ещё и лежит поверх этого поля. Можно ли как-нибудь разделить эти элементы и прописывать им стили по отдельности?

@Gopher · 25.12.2013, 09:44

Покажите страницу на которой нужно изменить вид сего элемента!

@andr-xw · 25.12.2013, 10:03 **[ТС]**

Сообщение от Gopher

Покажите страницу на которой нужно изменить вид сего элемента!

В каком смысле?

@Gopher · 25.12.2013, 10:30

Сообщение от andr-xw

В каком смысле?

Ссылку на страницу дайте!

@andr-xw · 25.12.2013, 14:45 **[ТС]**

Сообщение от Gopher

Ссылку на страницу дайте!

А зачем?

@Gopher · 25.12.2013, 15:47

Посмотреть что браузер выводит

@andr-xw · 25.12.2013, 15:49 **[ТС]**

А какая разница, что он выводит изначально? Вопрос в том, как это изменить?

@Gopher · 25.12.2013, 15:53

Тогда сами кликайте на элемент правой кнопкой => Исследовать элемент и в отладчике пробуйте и эксперементируйте! Не забывайте про кросбраузерность и разные оськи!) У меня в линуксе на фаерфоксе редактируется!) Удачи!

@andr-xw · 25.12.2013, 18:05 **[ТС]**

Нет, Gopher, не получается так, как ты сказал. Там это так же единый элемент.

Пока придумал только такое

HTML5
1
2
3
4
5
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" value="" name="file" style="height:0;width:0;" id="file_field" />
    <input type="button" value="Выберите файл" id="file_name" onclick="fileField();" />
    <input type="submit" value="Добавить" />
</form>

JavaScript
1
2
3
function fileField() {
    $('#file_field').click();
}

Ток теперь не знаю, как вставить название файла в имя кнопки.

@Gopher · 25.12.2013, 20:00

В так случае это почти лучший вариант, но я бы вместо <input type="submit"> использовал <button> туда можно картинку крутануть!)

@dramf · 25.12.2013, 22:51

решал как-то такую проблему.
правда, не скажу что правильно, но получилось

в общем смысл следующий: делаем прозрачным input type="file", а под него нужный блок, хоть текст, хоть картинку.

HTML5
1
2
                    <div class='paFileText' id='FileName1'><img src="images/filein.png" /></div>
                    <input type="file" name="file1" class='paFile' id='File1'>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.paFileText {
    margin-top: 10px;
    padding-top: 4px;
    position: relative;
    text-align: center;
    color: #000; 
    white-space: nowrap;
     -o-text-overflow:ellipsis;
    text-overflow: ellipsis;
    width: 180px;
    height: 20px;
    background-color: #fff;
    border-radius: 5px;
     overflow: hidden; 
     z-index: 1;
}
 
.paFile {
    top: -25px;
    cursor: pointer;
    position: relative;
    -moz-opacity: 0;  
    filter: alpha(opacity=0);   
    opacity: 0;
    font-size: 15px; 
    height: 25px;
    width: 180px;
     z-index: 20;
}

@andr-xw · 26.12.2013, 00:49 **[ТС]**

Gopher, мне не нужна картинка, кнопка в виде кнопки меня вполне устраивает.
Проблему с именем кнопки решил, выкладываю итоговый код, надеюсь кому-нибудь будет полезно.

HTML5
1
2
3
4
5
<form action="" method="post" enctype="multipart/form-data">
    <input type="file" value="" name="file" style="height:0;width:0;" id="file_field" onchange="fileName();"/>
    <input type="button" value="Выберите файл" id="file_name" onclick="fileField();" />
    <input type="submit" value="Добавить" />
</form>

JavaScript
1
2
3
4
5
6
7
8
9
function fileField() {
    $('#file_field').click();
}
function fileName() {
    var file_path = $('#file_field').val();
    if (file_path != '') {
        $('#file_name').val(file_path.substring(file_path.lastIndexOf('\\')+1, file_path.length));
    }
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449

	Дизайн multipart формы 25.12.2013, 09:21. Показов 1548. Ответов 11 Метки нет (Все метки) <input type="file"> создает на страничке кнопку для выбора файла и текстовое поле с именем файла. Но выглядит все это через жопу. Да ещё и во всех браузерах по разному, общее только одно - везде это выглядит через жопу. Применить стили я не могу, поскольку они применяются к текстовому полю, а кнопка остается такой же, да ещё и лежит поверх этого поля. Можно ли как-нибудь разделить эти элементы и прописывать им стили по отдельности? 0

@Gopher 1 / 1 / 0 Регистрация: 23.12.2013 Сообщений: 20
	25.12.2013, 09:44
	Покажите страницу на которой нужно изменить вид сего элемента! 0

@Gopher 1 / 1 / 0 Регистрация: 23.12.2013 Сообщений: 20
	25.12.2013, 15:47
	Посмотреть что браузер выводит 0

@andr-xw 123 / 77 / 33 Регистрация: 05.03.2013 Сообщений: 449
	25.12.2013, 15:49 [ТС]
	А какая разница, что он выводит изначально? Вопрос в том, как это изменить? 0

@Gopher 1 / 1 / 0 Регистрация: 23.12.2013 Сообщений: 20
	25.12.2013, 15:53
	Тогда сами кликайте на элемент правой кнопкой => Исследовать элемент и в отладчике пробуйте и эксперементируйте! Не забывайте про кросбраузерность и разные оськи!) У меня в линуксе на фаерфоксе редактируется!) Удачи! 0

@Gopher 1 / 1 / 0 Регистрация: 23.12.2013 Сообщений: 20
	25.12.2013, 20:00
	В так случае это почти лучший вариант, но я бы вместо <input type="submit"> использовал <button> туда можно картинку крутануть!) 0