Как клонировать input type="file" и поместить в другое место так чтобы сохранилось значение filename?

Question

[Евгений Федоров]

Хочу получить превью изображение на изменении значения инпута type="file" для этого можно использовать громоские библотеки или поместить инпут в спрятанный айфрейм и отправить форму с инпутом при этом получив ответ с загруженной картинкой и превью.

Меня не устраивает что нужно задавать target для формы так как невалидно иметь форму в форме а у меня инпут для выбора изображения уже в форме c дргуими полями. И чтобы получить превью мне не нужно отправлять все данные полей формы а только сделать асинхронную загрузку изображения на сервер и получения урл к нему.
FormData не предлагать нужна поддержка ие 9.

$('body').on( 'change', 'input', function(e) {	
	$('body').append('<iframe id="upload-image"></iframe>');
	$('#upload-image').contents().find('body').append('<form method="POST" enctype="multipart/form-data" action="images.php"></form>');
	var input = $(this).clone(true),
	form = $('#upload-image').contents().find('form');
	input.appendTo(form);
	$('#upload-image').load(function(){
		console.log($('#upload-image').contents().html());
	});
	$('#upload-image').contents().find('form').submit();
});

Данный код в нетворке выглядит так

Answer 1

[Максим Барулин]

Инпут нужно не клонировать, а перемещать. Второе, для получения превью можно использовать html5 file api, но, сомневаюсь, что 9 осёл его поддерживает. Отправить файл ajax-ом на сервер в старых браузерах можно двумя способами, через iframe или flash. Я обычно делал две формы, одну основную и одну скрытую, в скрытую переносил загруженный файл и сабмитил её во фрейм, потом показывал превью в основной.

Comments

[Евгений Федоров]

спасибо!