Как передать данные из инпута в инпут?

Question

[Сергей]

Как передать имя файла из input type="file" в input type="text" при изменении файла? Такая задача возникла, так как мне необходимо сделать форму с нестандартным инпутом для загрузки файла. Так как он стилизован, то мы его скрываем и вместо него выводим label иinput type="text". Во время выбора другого файла - название выводимое в input type="file" должно передаваться в input type="text" и соответственно меняться. Пытался присвоить значение одного val() к другому, но не получилось.

Comments

[Роман]

в "текст" должно записываться значение предыдущего файла или нового?

[Сергей]

Роман: в текст должно передаваться значение того, файла который мы выбираем. Тоесть открываем "выбрать файлы", выбираем файл и его имя отображается в тексте.

Answer 1

[Евгений Петров]

Пример

HTML

<form action="">
	<button type="button">Выбрать</button>
	<input name="f" type="file" multiple></input>
	<input name="t" type="text"></input>
</form>

CSS

[type="file"] {
	display: none;
}

JS

$(document)
	.on('click', '[type="button"]', function (e) {
		this.form.f.click();
	}).on('change', '[type="file"]', function (e) {
		if (this.files) {
			for (var i = 0, value = []; i < this.files.length; i++) {
				value.push(this.files[i].name);
			}

			value.join();
		} else {
			var value = this.value.replace(/^.+[\\\/]/, '');
		}

		this.form.t.value = value;
	});

Answer 2

[Андрей Федоров]

А что конкретно не работает?

<form action="">
  <input name="f" id="f" type="file" onchange="ept();"></input>
  <input name="t" id="t" type="text"></input>
</form>

function ept() {
  document.getElementById('t').value = document.getElementById('f').value;
}

Comments

[Евгений Петров]

В принципе проблем нет, но если есть multiple, то так не выйдет — получим имя только первого файла.

[Андрей Федоров]

Так он наверно массив возвращает? Можно попробовать суммировать все элементы в строку. Мне кажется, что jq это уж сильно избыточно.

[Евгений Петров]

Андрей Федоров: Никто не мешает отслеживать change точно так же — отслеживая в document. Но инлайн-атрибуты для обработчиков... Вот это старьё.

[Андрей Федоров]

Э... Старье? Кроме шуток, может есть какие-то более прагматичные аргументы против инлайн-событий?

[Евгений Петров]

Посмотрите на причину ошибки в этой теме.
Где ошибка в этом калькуляторе?

[Андрей Федоров]

Ну уж. Просто не нужно называть функции так же как атрибуты.

[Евгений Петров]

Вы просто не понимаете тему контекстов. Увы.
Javascript не должен ничего знать про атрибуты элементов, и перенос слушателя события на другой элемент не должен никак влиять на работу скрипта.

К сожалению, вы из тех, кто с пеной у рта будет настаивать на том, что такая говнопрактика вполне себе хороша. Можете продолжать использовать этот примитив в надежде, что интерфейсы элементов не обогатятся новыми свойствами и методами.

[Евгений Петров]

И, кстати, value у поля выбора типа file не возвращает массив, и в принципе не может — в атрибутах могут храниться исключительно строки.

[Андрей Федоров]

К чему этот доморощенный психоанализ? Почитайте мои реплики тут внимательно. В них вопросы, желание получить правильное представление о проблеме и уважение к вам как к специалисту. А вы про пену у рта. Напрасно.

[Евгений Петров]

Я привёл вам ссылку на реальный пример, как человек нарвался на захват контекста инлайн-обработчике. Меня бы крайне сильно смутил тот факт, что любой атрибут из элемента (и даже не указанный) может пересекаться с именами свойств глобального объекта.

Однако, вы продолжаете говорить, что дело лишь в именовании вызываемой функции. Я не понимаю, чем вызвано это упрямство. Если учесть необходимость одновременной работы в приложении многих модулей, прослушивающих одни и те же события, то такое поведение, на мой взгляд, или граничит с фанатизмом, или вызвано негативом по отношению к собеседнику.

Если очевидные доводы против практики использования инлайн-атрибутов для регистрации слушателя не работают, лучше признать этот фанатизм и не пытаться убеждать. Если же верно второе предположение, то смысла в аргументации ещё меньше.

[Андрей Федоров]

Ну... Еще есть вариант, что собеседник не понял, что вы пытались сказать. Или понял по-своему.
Я не фанат, просто квалификация недостаточная. А старших товарищей, которые могли бы все объяснить доходчиво рядом не имеется.