В данном случае имеем стандартный input с выбором файла, которому поставлен "opacity: 0" и "z-index:9999", а под него засунута своя стилизованная кнопка, 3 из которых мы видим на картинке.
Все это работает так:
- изначально есть только одно поле выбора файла. Мы клацаем по кнопке "Выберите файл..." и наша надпись на кнопке соответственно заменяется именем выбранного файла
- затем, если нам надо добавить еще один файл, мы клацаем на кнопку "+" и снизу добавляется еще одно поле (подобно первому скрину с 3-мя полями). Каждое новое поле имеет свой id вида "#fln№" (первое поле #fln1, второе #fln2 и т.д.) и одинаковый класс ".uplFileFl"
Проблема такая:
Название выбранного файла удачно цепляется только на первой кнопке, а после добавления новых полей событие уже не срабатывает. Прошу подсказать как правильно повесить события на клик, чтобы во второй или третьей кнопке точно определить id и через него уже провести необходимые манипуляции.
Другими словами, мы клацаем на кнопку и нам надо определить ее id.
var wrap = $(".ffile_upl"),/* общая обертка, оборачивающая все поля */ inp = $("input.uplFileFl"),/* инпут выбора файла (по стилям он скрыт) */ lbl = $("input.uplFileFl + span"),/* видимая кнопка, которая идет сразу же за инпутом выбора файла */ iplus = $("#iplus");/* кнопка добавления нового поля */inp.bind('click',function(){... console.log( inp.attr('id'));/* не срабатывает вывод id на добавляемых кнопках, только на первой*/});/*—попытка узнать выбранное имя файла и сохранить его на видимой кнопке */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:\\somepath\\",'');if(! file_name.length )return; lbl.addClass('no-default-text'); lbl.text( file_name );}).change();
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
advokatua
Есть вот такой блок с выбором файлов:
В данном случае имеем стандартный input с выбором файла, которому поставлен "opacity: 0" и "z-index:9999", а под него засунута своя стилизованная кнопка, 3 из которых мы видим на картинке.
Все это работает так:
- изначально есть только одно поле выбора файла. Мы клацаем по кнопке "Выберите файл..." и наша надпись на кнопке соответственно заменяется именем выбранного файла
- затем, если нам надо добавить еще один файл, мы клацаем на кнопку "+" и снизу добавляется еще одно поле (подобно первому скрину с 3-мя полями). Каждое новое поле имеет свой id вида "#fln№" (первое поле #fln1, второе #fln2 и т.д.) и одинаковый класс ".uplFileFl"
Проблема такая:
Название выбранного файла удачно цепляется только на первой кнопке, а после добавления новых полей событие уже не срабатывает. Прошу подсказать как правильно повесить события на клик, чтобы во второй или третьей кнопке точно определить id и через него уже провести необходимые манипуляции.
Другими словами, мы клацаем на кнопку и нам надо определить ее id.
Edited by advokatuaLink to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.