ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Стилизация Input типа File
1 сообщений из 1, страница 1 из 1
Стилизация Input типа File
    #39191861
justajoke
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
justajoke
Гость
Добрый вечер, у меня есть код, который участвует в стилизации внешнего вида инпута. Суть в том, что инпут прячется за label'ом, код ловит все клики по label'у и направляет их на инпут. Так же код меняет надпись "Выбрать файл", на название выбранного файла. Вот собственно сам код:
Код: html
1.
	<label class="file_upload"><span class="button">Выбрать файл</span><input name="Works[1]" type="file" autocomplete="off"></label>


Код: javascript
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.
30.
31.
32.
33.
34.
35.
36.
$(function(){
    var wrapper = $( ".file_upload" ),
        inp = wrapper.find( "input" ),
        btn = wrapper.find( ".button" ),
        lbl = wrapper.find( "mark" );

    // Crutches for the :focus style:
    inp.focus(function(){
        wrapper.addClass( "focus" );
    }).blur(function(){
        wrapper.removeClass( "focus" );
    });

    var file_api = ( window.File && window.FileReader && window.FileList && window.Blob ) ? true : false;

    inp.change(function(){
        var file_name;
        if( file_api && inp[ 0 ].files[ 0 ] )
            file_name = inp[ 0 ].files[ 0 ].name;
        else
            file_name = inp.val().replace( "C:\\fakepath\\", '' );

        if( ! file_name.length )
            return;

        if( lbl.is( ":visible" ) ){
            lbl.text( file_name );
            btn.text( "Выбрать" );
        }else
            btn.text( file_name );
    }).change();

});
$( window ).resize(function(){
    $( ".file_upload input" ).triggerHandler( "change" );
});


Код работает полностью исправно, однако я столкнулся с двумя проблемами:
1) данный код делает поиск по классу file_upload и тд. при загрузке страницы т.е динамически добавленные инпуты данным кодом игнорируются. Я пытаюсь вынести часть кода (2-4 или 2-12 строки) в отдельную функцию, которая бы вызывалась при загрузке страницы и при каждом динамическом добавлении нового инпута, но поскольку навыком js я не искушен моя версия не работает, поэтому мне не помешал бы совет\направление поиска
Код: javascript
1.
2.
3.
4.
5.
6.
7.
function search(){
    var wrapper = $( ".file_upload" ),
        inp = wrapper.find( "input" ),
        btn = wrapper.find( ".button" ),
        lbl = wrapper.find( "mark" );
return wrapper, inp, btn, lbl;
};


2) когда код начнет относиться к "новым" инпутам так же, как к "старым" вскроется другая проблема. Надпись "Выбрать файл" меняется на название выбранного файла, только при работе с первым (в смысле расположения в коде) инпутом, а все оставшиеся инпуты, как послушные марионетки меняют надпись в след за первым, но не сами по себе. Я предположил, что тут требуется ввод цикла, но все мои попытки подходят для инпута с атрибутом multiple, но не для нескольких разных инпутов.
...
Рейтинг: 0 / 0
15.03.2016, 00:52
| Ответить | Цитировать | Написать  
1 сообщений из 1, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Стилизация Input типа File
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]