Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Принципы так называемой "AJAX загрузки файлов на сервер"
Форумы портала PHP.SU » » Хранилище функций на JavaScript » Принципы так называемой "AJAX загрузки файлов на сервер"

Страниц (2): [1] 2 »
 

1. Haron - 13 Апреля, 2011 - 05:51:37 - перейти к сообщению
На самом деле - не существует никакой AJAX-загрузки файлов на сервер.
Как известно - классический способ асинхронной отправки данных на сервер - это использование объекта XmlHttpRequest. Однако, из соображений безопасности, данный объект не поддерживает никаких передач файлов на сервер, и никогда не поддерживал.

Встаёт вопрос, так как же работают сотни плагинов и велосипедов под гордым названием AJAX Multiple File Uploader Mega Plugin with Super Progress Bar version 9000. Ведь они, падлы, реально "загружают файлы на сервер асинхронно". На самом деле - асинхронности в них принципиально - нет никакой, и всё что они делают - создают видимость асинхронности загрузки.

Так как же они создают видимость? А всё банально просто: Они используют HTML-тег <IFRAME></IFRAME>, то бишь обыкновенный фрейм, и отправляют данные самым что ни на есть - синхронным способом, только страница при этом не обновляется, а как и положено - обновляется фрейм. Такие дела. Фрейма естественно, не видно, так как он делается невидимым (style="display: none;").

Итак - мы подошли к самому интересному! К процессу создания "AJAX-загрузки" файлов! - Погнали:

Создаём файло test.php например:
В файл вписываем html-код:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <iframe style="display: none;" id="superframe" name="superframe"></iframe>
  3. <form method="post" enctype="multipart/form-data" action="test.php" target="superframe">
  4.         <input name="userfile" type="file"> Выбери файло
  5.         <input type="submit" value="Послать" />
  6. </form>
  7.  

Ниже вписываем php-код
PHP:
скопировать код в буфер обмена
  1. <?PHP
  2. //Файлы у меня валятся в папку upload в корне сайта, замените на свою.
  3. $uploaddir = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'upload' . DIRECTORY_SEPARATOR;
  4. $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);
  5. if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
  6.         print "Зокачено успешно!!11";
  7. } else {
  8.         print "EPIC FAIL";
  9. }
  10. ?>


Итак, готово. - Выполняем скрипт, и видим собственно форму и что самое важное - ДВА НОТИСА:
Notice: Undefined index: userfile in .....uploader.php on line 27
Notice: Undefined index: userfile in .....uploader.php on line 28

Они вылазят потому, что мы просто загрузили страничку, а суперглобальной переменной FILES у нас пока не существует.
Вы скажете "Авотщас - я зокачаю файл - и мне выползет сообщение "Закачено успешно!!11" либо "FAIL"", а ошибки пропадут.

Авотфиг! :-D
Пробуем зокачать файл, и с изумлением видим - НОТИСЫ ОСТАЛИСЬ!! , а это значит - сама страничка НЕ ПЕРЕЗАГРУЗИЛАСЬ, УРА!!11

Возникает вопрос, а хде собственно, сообщение об успешном зокачивании, либо фейле, и что собственно, перезагрузилось? Всё просто! Сообщения вылезли, но их не видно, так как они находятся в том самом скрытом фрейме! А перезагрузился - невидимый фрейм! WIN!!!11 Вот так вот принципиально и работает костыль, под гордым названием "AJAX-загрузка файла".

Возникает следующий вопрос: "А в таком случае - зойчем здесь нужен Javascript???"
Всё просто:
- Он может сгенерить тот самый скрытый фрейм и форму на странице.
- Он может вывести свистелки и перделки, например картинку с прогрессбаром.
- Он может распарсить данные вернувшиеся во фрейм, и вывести их за пределами оного (Например показать те самые сообщения об успешной загрузке или фейле).

PS
Кстати говоря, данная техника вполне годна для передачи на сервер - не только файлов, но и полноценных POST-запросов. Кроме того, в отличие от того-же XmlHttpRequest - она кроссплатформенная, простая как кирпич и (что полезно) - не подпадает под так называемое "правило ограничения домена".



Ну на этом я заканчиваю. Надеюсь всем всё ясно, если неясно - отвечу на вопросы Улыбка
2. DeepVarvar - 13 Апреля, 2011 - 06:57:42 - перейти к сообщению
А я вот не сторонник свистелок и перделок для загрузки файлов.
Единственное что делал на жабаскрипте - добавление еще одного <input type="file"......
Остальное - понты и лишний торомоз.
3. Haron - 13 Апреля, 2011 - 09:14:29 - перейти к сообщению
DeepVarvar пишет:
А я вот не сторонник свистелок и перделок для загрузки файлов.
Единственное что делал на жабаскрипте - добавление еще одного <input type="file"......
Остальное - понты и лишний торомоз.


Абсолютно солидарен.
Да вот только как это заказчикам объяснить? Они насмотрелись всяких там юкозов - и хотят так же, чтобы посвистывало...
4. Саныч - 13 Апреля, 2011 - 09:19:10 - перейти к сообщению
DeepVarvar, дело не в том, сторонник или нет, а в том, что приходится иногда таким извращаться...
Пример из жизни. До недавнего времени я так же был "не сторонник свистелок и перделок", но недавно заказчику делал редактор статей, сделал все ок... Через время он мне говорит: "Хочу чтобы к статьям можно было добавлять фото"... Сделал я ему вот так, как вы говорили, через js с добавлением еще одного инпута... На что он мне заявляет: "Это класно, но я хочу, чтобы под текстовым полем сразу высвечивалась миниатюра с тем, что я загрузил и я мог вставлять эти фото в текст, в то место, где мне надо"...
Вобщем вот тут мне и пришлось извращаться с фреймами, но в итоге получилось вполне даже красиво и главное удобно. Так что "свистелки и перделки" иногда бывают очень даже полезны

Haron пишет:
Да вот только как это заказчикам объяснить? Они насмотрелись всяких там юкозов - и хотят так же, чтобы посвистывало...

Знаете, а я их понимаю и даже потдерживаю (правда иногда Улыбка ). Вспомните интернет хотябы 5-летней давности и сравните с сегодняшним... Видите, как все стало "весело, интересно, красиво"... И вот благодаря таким заказчикам, мы и развиваемся, и делаем еще более красиво... Разве это плохо?..
5. Haron - 14 Апреля, 2011 - 07:08:22 - перейти к сообщению
Необходимо сохранять разумный баланс, между юзабилити и простотой реализации. А этого достаточно сложно добиться. Простота реализации - в конечном итоге экономит наше время, и ресурсы пользователя.

Вот только срачи по теме "Написал яваскрипт-код\сверстал страничку, почему оно в опере глючит, в фаере - нормально работает, а в осле как г**но" - не утихает и по сей день. Да, сейчас потихоньку приходит HTML5 и CSS3, которые избавляют от многих подобных проблем, облегчая работу. И асинхронность конечно, хорошая вещь, но почему-то разработчики обозревателей - кладут большой болт на совместимость. Чего стоят различные реализации того-же xmlHttpRequest к примеру.

В итоге, приходится писать обёртки под различные реализации работы с DOM в разных обозревателях, юзать CSS-хаки, и в итоге, изначально быстрая страничка, превращается в нафаршированное скриптами, глючащее УГ (Типичный пример - сайт сбербанка, и система сбербанк-онлайн). А всё потому, что в погоне за кроссплатформенностью, теряется баланс. Увы, это серъёзная проблема, и таковой останется ещё долгое время. ИМХО - пока не похоронят осла.

Отсюда и мнение, вполне справедливое - что всё хорошо в меру. Где можно обойтись без яваскрипта - надо обходиться без оного.
6. Viper - 14 Апреля, 2011 - 08:05:39 - перейти к сообщению
Haron пишет:
Написал яваскрипт-код\сверстал страничку, почему оно в опере глючит, в фаере - нормально работает, а в осле как г**но"
на форуме есть тема что такое быдлокод. так вот из той же оперы...
7. kvins - 14 Апреля, 2011 - 20:37:04 - перейти к сообщению
а код точно рабочий? щас создал копию а у меня не работает((
8. join - 15 Июня, 2011 - 11:22:55 - перейти к сообщению
Haron
пока не похоронят осла...

Все верно Haron, все так и есть, только вот css3 -- ЧАСТИЧНО тоже по разному отображается в хромах, сафарях, операх, лисичках... ( например -transform ).
Даже если ослик 'склеит ласты', хуки не исчезнут и извращаться над кодом все-равно придется.

Видимо дело в пресловутой, не честной конкуренции между хозяевами разных броузеров.
Тупой несогласованности и отсутствии каких либо уступок 'коллегам'.
На девелоперов, сайто-строителей - они клали большой болт..
9. glutaminefree - 05 Июля, 2011 - 00:55:51 - перейти к сообщению
В CSS3 многие свойства приходится прописывать отдельные для каждого браузера. В основном это касается FF, так как большинство свойств требуется переопределять именно для этого браузера. Но вот свойство transform вообще полнейший бред. Для каждого браузера своё свойство для одного и того же %)

Я, если честно, поражён. Как такое допускает w3c. Это ведь ПОЛНОЕ отсутствие стандартов. Красивый css файл уже хрен получишь. Получишь помойку с тонной строк, которые делают одно и тоже, но для разных браузеров. Это самодеятельность какая-то. Разрабы браузеров вообще с ума по сходили. Наблюдая картину, представляется, что они сидят в офисе и думают: "А давайте этот тег у нас будет не таким, а вот с такой буквой на конце, а вот этот тег чтоб начинался с трёх больших букв, потом тире, а потом остальная часть" и всё такое в этом роде.

Почему же такое допускается вообще Нахмурился Нахмурился Нахмурился
10. Данил_123 - 27 Августа, 2011 - 21:57:47 - перейти к сообщению
по мне самым безопасным способом загрузки данных были разнообразные клиенты.. Всегда пользовался WinSCP и доволен работой
11. vlom - 27 Августа, 2011 - 22:12:45 - перейти к сообщению
Данил_123 пишет:
по мне самым безопасным способом загрузки данных были разнообразные клиенты.. Всегда пользовался WinSCP и доволен работой

да это было и останется так для большинства разработчиков, но тут же речь идет об удобстве заказчика
12. alxfro - 20 Июня, 2012 - 17:33:03 - перейти к сообщению
Haron пишет:
На самом деле - не существует никакой AJAX-загрузки файлов на сервер. ...


Haron, вам надо было на хабре подобное публиковать Улыбка
13. armancho7777777 - 20 Июня, 2012 - 18:22:44 - перейти к сообщению
Удивляюсь, что не слышали про эту библиотеку))
Только ею и пользуюсь))
Кробраузерно и без тормозов.
input[type=file] задаём прозрачность + 1000x1000px + font-size 500px;
Помещаем в контейнер с overflow == hidden.
По событию change отправляем форму.
В ответ можно отправить название и путь загруженной картинки после обработки и вставить в DOM.
Ну, и так же в ответ можно отправить сообщения об ошибках по типу json и т.д.
14. IllusionMH - 20 Июня, 2012 - 23:23:15 - перейти к сообщению
В код не вчитывался, но похоже что тут действительно асинхронная передача файлов(чанками) на сервер. Рассчитано на передачу больших файлов с возможностью паузы/возобновления(и продолжения при разрыве связи)
Правда только для нормальных браузеров с поддержкой Files API
Resumable[dot]js: Fault Tolerant Resumable File Uploads in JavaScript
Git repo
15. IllusionMH - 20 Июня, 2012 - 23:27:50 - перейти к сообщению
armancho7777777, как я понял - для старых фолбэк.
"Цитаты из репозитория" пишет:
Resumable.js does not have any external dependencies other the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces. Currently, this means that support is limited to Firefox 4+ and Chrome 11+.

 

Powered by ExBB FM 1.0 RC1