Загрузка файлов через iframeОтсебятина от 05 июля 2009 года. Теги: HTML Javascript
AJAX нам дарит отличную возможность менять данные без перезагрузки страницы. Но когда речь идет о загрузке файлов, про AJAX приходится забыть. И здесь на помощь к нам приходит iframe.
Когда-то давно я прочитал статью про загрузку через файлов iframe по следующей схеме:
- В теле страницы существует форма для выбора файла
- По нажатию кнопки "отправить" форма копируется в iframe
- Форма отправляется в iframe на сервер
- Пришедший в iframe javascript меняет контент на странице
Эту схему я успешно реализовал в своих проектах, где не требовалась кроссбраузерность.
Недавно у меня вновь появилась необходимость динамической загрузки файлов, а именно — аватаров. Я взял старый скрипт и просто его скопировал. Но он не работал в IE, который напрочь отказывался клонировать форму в iframe, а простая вставка html не сохраняла value файл-формы (которое нельзя менять с помощью javascript).
=
Потратив много времени на попытку довести скрипт до кроссбраузерности, я начал искать решения в интернете, и каким-то образом попал на описание тега form в htmlbook.ru. И, о чудо, увидел там решение задачи!
Дело в том, что у тега form есть атрибут target, который не описан в спецификациях xHTML 1.1 и HTML 4.01, однако, валидатор этот атрибут воспринимает нормально.
Смысл атрибута target в том, что он указывает, в какое место будет выведен результат отправки формы. В качестве параметра мы можем указать как текущее окно, так и новое, а еще мы можем указать имя iframe!
Динамическая загрузка файла становится очень простой и удобной. Кстати, использование target поможет тем, кто так и не научился или не может использовать AJAX в силу разных обстоятельств.
Атрибут target поддерживают большинство браузеров (список не полный):
- IE >= 5.5
- Opera >= 9
- Safari >= 3.1
- Firefox >= 2.0
На затравку объединенный файл с абстрактным, но рабочим кодом:
<?php
if (empty($_FILES["myfile"]["name"])) {
?>
<html>
<head>
<title>Загрузка изображения</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<div id="imageId">Здесь должно появится изображение</div>
<iframe name="myIframe" style="display: none;"></iframe>
<br>
<form method="post" action="" enctype="multipart/form-data" target="myIframe">
<input type="file" name="myfile">
<input type="submit" value="Отправить">
</form>
</body>
<?php
}
else {
//В данном контексте мы не будем проверять файл на ошибки, размер, формат и имя (защита от Null-байт). Просто предположим, что приходит картинка
move_uploaded_file($_FILES["myfile"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].$_FILES["myfile"]["name"]);
echo <<<HEREDOC
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
parent.document.getElementById("imageId").innerHTML = '<img src="{$_FILES["myfile"]["name"]}" alt="Мое изображение!">';
</script>
</head>
</html>
HEREDOC;
}
?>
Хорошо, что не копипаст (по крайней мере не встречал такой же статьи). Но товарищ, никто вам не рассказывал о разделении логики от представления? Запихнуть в один скрипт и пхп и js и html это совершенное извращение.
Вы хоть потрудитесь разделить это дело...
Здравствуйте, Алексей.
Я прекрасно знаю о разделении логики от шаблонов.
В статье написал, что это абстрактный код.
Просто не вижу смысла в данном контексте разделять 40 строк кода на 3 части, новичкам понять будет гораздо тяжелее.
и пиздец
|