[ОТВЕТИТЬ]
Опции темы
20.04.2016 21:07  
OlegON
Есть желание под рамку смайликов приспособить нормальную форму загрузки, которая будет позволять выбрать несколько файлов в диалоговом окне, загружать их в хранилище и запихивать URI загруженных в окно ввода.

Проблема только в одном, не понимаю, как вернуть URI обратно в вызывающий форму скрипт... Кто-то умеет/видел, как делают? Есть ли известные дырки в таких вариантах? Может, есть какой-то другой, достаточно эргономичный вариант?
 
20.04.2016 21:38  
twix
Я решаю эту задачу через скрытый iframe.

Код:
	<form style="overflow:hidden;height:0;width:0;" id="uploadForm" action="/uploadfile/" method="post" enctype="multipart/form-data" target="uploadFrame">
		<input type="text" name="path" value="/" />
		<input type="file" name="file" multiple="false" />
	</form>
	<iframe style="border:none;height:0;width:0;" id="uploadFrame" name="uploadFrame"></iframe>
	<script>
		window.currentPath = '/';
		function doFileUpload(){
			if (jQuery('#uploadForm input[name="file"]').val() == '') return;
			jQuery('#uploadForm input[name="path"]').val(window.currentPath);
			jQuery('#uploadForm').submit();
			
			 // ЗДЕСЬ ВСТАВЛЯЕМ КОД, КОТОРЫЙ ПОКАЖЕТ ГДЕ-НИБУДЬ АНИМАШКУ ЗАГРУЗКИ
			
		}
		function uploadFrameLoad(){
			var response = jQuery('#uploadFrame').contents().find('body').html();
			jQuery('#uploadForm input[name="file"]').val('');
			
			// УБИРАЕМ АНИМАШКУ ЗАГРУЗКИ, И ПАРСИМ ИМЕНА ФАЙЛИКОВ, ПОЛУЧЕННЫХ В ПЕРЕМЕННУЮ response
			
		}
		jQuery(window).load(function(){
			jQuery('#uploadFrame').on('load',uploadFrameLoad);
			jQuery('#uploadForm input[name="file"]').change(doFileUpload);
		});
	</script>
Форма и фрейм видимы, но имеют нулевой размер, чтобы не разъезжать вёрстку, но при этом обойти браузерную "секурную" фишку со скрытыми инпутами и фреймами.
Чтобы вызвать диалог выбора файлов, нужно выполнить:
Код:
jQuery('#uploadForm input[name="file"]').click();
Это сымитирует клик* по инпуту типа "файл" в форме, вызывая нормальную его реакцию. После того, как его контент изменится (файлики выбраны) форма засабмиттится во фрейм, и как она прогрузится, контент (читай - имена загруженных файлов) будут в переменной response в функции uploadFrameLoad().

Как бы просто всё. Но пришёл я к этому варианту не сразу - пришлось повоевать с браузерами. (:

* Этот код работает в последних версиях браузеров. Ещё на этапе эволюции этого метода, для IE8 приходилось не вызывать метод jQuery(...).click(), а нативно инвокать ивент, переданный в обработчик, на инпуте, как бы передавая реально сгенерированный клик.

Последний раз редактировалось twix; 20.04.2016 в 21:45.
 
"Спасибо" twix от:
20.04.2016 21:42  
twix
Кстати, хром, будучи нормальным браузером, корректно отображает прогресс загрузки файлов в левом нижнем углу.

ЗЫЖ Могу поднапрячься, и переписать на голый js, без jQuery.
 
20.04.2016 22:15  
OlegON
Спасибо большое, отвлекли и забыл написать, что jquery избегаю, поскольку ради одной только этой фичи его цеплять не хотелось бы.
Но, пока писал строку выше, понял, что, собственно, грузить буду только с самой формой ввода, а там и так мусора - мама не горюй, т.е. не принципиально.
Как понял, если файл не загрузился, то в форме просто не будет его имени? Как у тебя на это юзеры реагируют? Любителям старых браузеров придется потерпеть и пользоваться старыми методами приаттачивания. В каком-то проекте побольше пробовал? Дыр нет? JS слишком сложен для меня, чтобы увидеть все его дыры, уж больно много вариантов использования...
 
20.04.2016 22:39  
twix
Более ранняя итерация (если можно так сказать) используется на . Проблем, вроде, не возникает (несмотря на то, что форма и фрейм там создаются динамически).
Тот вариант, что я привёл, используется на двух других проектах, которые показать в деле (дать доступ к "демо") не могу, ибо оно там только для одминов. (8

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

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

Последний раз редактировалось twix; 20.04.2016 в 22:41.
 
 
Опции темы



Часовой пояс GMT +3, время: 22:20.

Все в прочитанное - Календарь - RSS - - Карта - Вверх 👫 Яндекс.Метрика
Форум сделан на основе vBulletin®
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd. Перевод: zCarot и OlegON
В случае заимствования информации гипертекстовая индексируемая ссылка на Форум обязательна.