Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Загрузка файлов через iframe

Отсебятина от 05 июля 2009 года.    Теги: HTML Javascript


AJAX нам дарит отличную возможность менять данные без перезагрузки страницы. Но когда речь идет о загрузке файлов, про AJAX приходится забыть. И здесь на помощь к нам приходит iframe.

Когда-то давно я прочитал статью про загрузку через файлов iframe по следующей схеме:

  1. В теле страницы существует форма для выбора файла
  2. По нажатию кнопки "отправить" форма копируется в iframe
  3. Форма отправляется в iframe на сервер
  4. Пришедший в iframe javascript меняет контент на странице


  5. Эту схему я успешно реализовал в своих проектах, где не требовалась кроссбраузерность.

    Недавно у меня вновь появилась необходимость динамической загрузки файлов, а именно — аватаров. Я взял старый скрипт и просто его скопировал. Но он не работал в 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;
    }
    ?>
    Алексей  13.09.2011 в 15:37
    Хорошо, что не копипаст (по крайней мере не встречал такой же статьи). Но товарищ, никто вам не рассказывал о разделении логики от представления? Запихнуть в один скрипт и пхп и js и html это совершенное извращение.
    Вы хоть потрудитесь разделить это дело...
    Kreker  09.01.2012 в 00:56
    Здравствуйте, Алексей.
    Я прекрасно знаю о разделении логики от шаблонов.
    В статье написал, что это абстрактный код.
    Просто не вижу смысла в данном контексте разделять 40 строк кода на 3 части, новичкам понять будет гораздо тяжелее.
    Новичек  21.06.2012 в 22:06
    Я вот как новичек скажу обратное, вот в таком представлении намного тяжелее понять.
    Сейчас пытаюсь разобраться с загрузкой файлов через ajax, не очень получается.
    CoMMoN  16.08.2012 в 19:19
    То что нужно, я тоже новичок но вьехал сразу и успел уже модифицировать, автору спасибо
    Денис Орлов  08.10.2012 в 17:01
    Спасибо автору.
    Вот всегда ведь найдутся товарищи с претензиями...
    "Вы хоть потрудитесь разделить это дело..."
    Вы хоть потрудитесь поцеловать себя в ж...пу, Алексей.
    Аноним  27.01.2013 в 20:50
    cnmvnvbn
    Поддерживаю Дениса Орлова  03.04.2013 в 17:03
    Сабж
    AndreySSS  08.04.2013 в 12:02
    Прошло пару лет.. но, Алексей, законы поисковиков таковы, что крайне не рекомендуется всё разделять по полочкам без надобности, мы не в 90-х. Код нормально читаем и не понимаю что тут необычного когда мешают PHP c HTML и с JS. Вы еще напишите про стили и про спрайты, я вообще тогда поржу. Запомните, чем меньше файлов тем лучше, объединяйте в один файл. НО! Айфон не кэширует файлы более 25 килобайт. Короче изучайте и будет вам счастье. Автор молодец.
    Ser  05.11.2014 в 19:00
    Просто проверил форму отправки)
    Ser  05.11.2014 в 19:01
    автор написал про Ajax, а форма добаления без оного
    Аноним  19.06.2016 в 19:53
    почему коменты не защитил, всякую фигню могу писать
    Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его