Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/25: Рейтинг темы: голосов - 25, средняя оценка - 4.88
6 / 6 / 5
Регистрация: 19.09.2011
Сообщений: 537

Получить имя файла в объекте File

23.05.2016, 05:43. Показов 5094. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте
Есть JS который заменяет стандартный инпут type file (Загрузить файл)
Инпут выглядит в виде дива-кнопки и при выборе файла текст в диве меняется - с "Прикрепить файл" на имя прикрепленного файла
вот пример
Прошу помощи, не получается сделать отдельно див-кнопку "Загрузить файл" и инпут, в котором будет имя прикрепленного файла
HTML5
1
<input type="file" name="attach-order" class="attach_order" id="attachorder" title="Прикрепить файл" onchange="attachVM(this);">
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
<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>
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
23.05.2016, 05:43
Ответы с готовыми решениями:

Как задать имя файла для HTML5 File API?
Что-то совсем затупил, мне нужно прочесть содержимое определенного файла при помощи HTML5 File API... Во всех примерах есть что-то вроде: ...

В ECMAScript (Avidemux) как получить имя файла?
Видеоредактор Avidemux в своих скриптах использует ECMAScript. Вот кусок скрипта в котором мне надо получить имя обрабатываемого файла ...

Записать имя файла в тег при выборе из input type=file
Здравствуйте, помогите пажалуйста, не могу догнать как сделать с jquery так, чтобы когда выбрана картинка в поле input type file имя...

5
 Аватар для sad67man
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,815
23.05.2016, 15:21
https://jsfiddle.net/fgjgrcLc/1/
0
6 / 6 / 5
Регистрация: 19.09.2011
Сообщений: 537
23.05.2016, 15:37  [ТС]
sad67man, это тоже самое что и у меня, а нужно кнопку "Прикрепить файл" отдельно от текстового поля в котором указывается имя прикрепленного файла
(в Opera 12.17 ваш код не работает)
0
 Аватар для sad67man
2603 / 1507 / 689
Регистрация: 23.08.2015
Сообщений: 3,815
23.05.2016, 15:48
sashgera, https://jsfiddle.net/fgjgrcLc/4/
0
6 / 6 / 5
Регистрация: 19.09.2011
Сообщений: 537
23.05.2016, 16:10  [ТС]
sad67man, да, примерно так, только поле с именем прикрепленного файла нужно обернуть в див, чтобы получилось как на этой картинке. Код JS который я выложил я уже "подшаманил" под свои нужды, как в нем внести изменения, чтобы получилось так?
Изображения
 
0
6 / 6 / 5
Регистрация: 19.09.2011
Сообщений: 537
24.05.2016, 19:29  [ТС]
Тема закрыта. Вопрос решен.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
24.05.2016, 19:29
Помогаю со студенческими работами здесь

Получить имя файла элемента audio/video
Доброго времени суток. jQuery начал заниматься недавно, нужно получить имя файла у audio или video. Вот есть: var $audio = $(this); ...

Prototype Объект в объекте в объекте
Всем здравствуйте! Хотел бы у спросить как оптимально организовать с объектом вида var object1 = { object1: { ...

Из строки, содержащей полное имя файла, получить имя файла
Помогите Дана строка, содержащая полное имя файла, то есть имя диска, список каталогов (путь), собственно имя и расширение. Выделить из...

Получить имя файла из диалога выбора файла
Нашел класс диалога выбора файла: package com.stetsenko.openfiledialog; import android.app.AlertDialog; import...

Класс File, реализовать event для реагирования на изменения в объекте
Есть класс File. Нужно реализовать event для реагирования на изменения в объекте; разработать графический интерфейс. Помогите пожалуйста!...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru