VPF::Изменить поле Загрузить файл - Форум программистов

sashgera

Дата 23.5.2016, 15:24 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Здравствуйте
Есть JS который заменяет стандартный инпут type file (Загрузить файл)
Инпут выглядит в виде дива-кнопки и при выборе файла текст в диве меняется - с "Прикрепить файл" на имя прикрепленного файла
вот пример
Прошу помощи, не получается сделать отдельно див-кнопку "Загрузить файл" и инпут, в котором будет имя прикрепленного файла
примерно как на этой картинке:
user posted image

Код


<input type="file" name="attach-order" class="attach_order" id="attachorder" title="Прикрепить файл" onchange="attachVM(this);">

Код


<script type="text/javascript">
$(document).ready(function(){
    $.fn.customFile = function(){
        return this.each(function(){
            var $file = $(this).addClass('customfile'),
            $wrap = $('<div class="customfile-wrap">'),
            $link = $('<div style="display: inline-block; background-color: #ccc; padding: 10px 40px; cursor: pointer;" class="inp_default_text" href="javascript:void(0);">'+$file[0].title+'</div>'),
            $label = $('<label class="inp_default_text" for="'+ $file[0].id +'">'+$file[0].title+'</label>'), //Hack for IE
            isIE = /msie/i.test(navigator.userAgent);
            $file.css({
                position: 'absolute',
                left: '-9999px'
            });
            $wrap.insertAfter($file).append( $file, ( isIE ? $label : $link ));
            $file.attr('tabIndex', -1);
            $link.attr('tabIndex', -1);
            $link.click(function(){
                $file.focus().click(); 
            });
            $file.change(function(){
                var filename = $file.val().split('\\').pop();
                $link.html(( filename ? filename : $file[0].title ));     
            });
        });
    };
    $('input[class=attach_order]').customFile(); 
});
</script>

sashgera

Дата 24.5.2016, 19:30 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Тема закрыта. Вопрос решен.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »