PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Описание: Описание технологии "AJAX"-загрузки файлов на сервер.
Haron
Отправлено: 13 Апреля, 2011 - 05:51:37
Post Id



Частый гость


Покинул форум
Сообщений всего: 197
Дата рег-ции: Июнь 2010  
Откуда: Оттуда


Помог: 5 раз(а)




На самом деле - не существует никакой 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 - она кроссплатформенная, простая как кирпич и (что полезно) - не подпадает под так называемое "правило ограничения домена".



Ну на этом я заканчиваю. Надеюсь всем всё ясно, если неясно - отвечу на вопросы Улыбка

(Отредактировано автором: 13 Апреля, 2011 - 06:45:21)



-----
И чё?
 
 Top
DeepVarvar Супермодератор
Отправлено: 13 Апреля, 2011 - 06:57:42
Post Id



Активный участник


Покинул форум
Сообщений всего: 10376
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




А я вот не сторонник свистелок и перделок для загрузки файлов.
Единственное что делал на жабаскрипте - добавление еще одного <input type="file"......
Остальное - понты и лишний торомоз.
 
 Top
Haron
Отправлено: 13 Апреля, 2011 - 09:14:29
Post Id



Частый гость


Покинул форум
Сообщений всего: 197
Дата рег-ции: Июнь 2010  
Откуда: Оттуда


Помог: 5 раз(а)




DeepVarvar пишет:
А я вот не сторонник свистелок и перделок для загрузки файлов.
Единственное что делал на жабаскрипте - добавление еще одного <input type="file"......
Остальное - понты и лишний торомоз.


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


-----
И чё?
 
 Top
Саныч
Отправлено: 13 Апреля, 2011 - 09:19:10
Post Id



Участник


Покинул форум
Сообщений всего: 1364
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




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

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

Знаете, а я их понимаю и даже потдерживаю (правда иногда Улыбка ). Вспомните интернет хотябы 5-летней давности и сравните с сегодняшним... Видите, как все стало "весело, интересно, красиво"... И вот благодаря таким заказчикам, мы и развиваемся, и делаем еще более красиво... Разве это плохо?..

(Отредактировано автором: 13 Апреля, 2011 - 09:22:44)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
Haron
Отправлено: 14 Апреля, 2011 - 07:08:22
Post Id



Частый гость


Покинул форум
Сообщений всего: 197
Дата рег-ции: Июнь 2010  
Откуда: Оттуда


Помог: 5 раз(а)




Необходимо сохранять разумный баланс, между юзабилити и простотой реализации. А этого достаточно сложно добиться. Простота реализации - в конечном итоге экономит наше время, и ресурсы пользователя.

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

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

Отсюда и мнение, вполне справедливое - что всё хорошо в меру. Где можно обойтись без яваскрипта - надо обходиться без оного.


-----
И чё?
 
 Top
Viper
Отправлено: 14 Апреля, 2011 - 08:05:39
Post Id



Активный участник


Покинул форум
Сообщений всего: 4557
Дата рег-ции: Февр. 2007  
Откуда: Симферополь


Помог: 98 раз(а)




Haron пишет:
Написал яваскрипт-код\сверстал страничку, почему оно в опере глючит, в фаере - нормально работает, а в осле как г**но"
на форуме есть тема что такое быдлокод. так вот из той же оперы...


-----
Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com
Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе
 
 Top
kvins
Отправлено: 14 Апреля, 2011 - 20:37:04
Post Id



Частый гость


Покинул форум
Сообщений всего: 197
Дата рег-ции: Февр. 2011  


Помог: 0 раз(а)




а код точно рабочий? щас создал копию а у меня не работает((


-----
тута
 
 Top
join
Отправлено: 15 Июня, 2011 - 11:22:55
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)




Haron
пока не похоронят осла...

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

Видимо дело в пресловутой, не честной конкуренции между хозяевами разных броузеров.
Тупой несогласованности и отсутствии каких либо уступок 'коллегам'.
На девелоперов, сайто-строителей - они клали большой болт..


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
glutaminefree
Отправлено: 05 Июля, 2011 - 00:55:51
Post Id



Новичок


Покинул форум
Сообщений всего: 39
Дата рег-ции: Апр. 2011  


Помог: 0 раз(а)




В CSS3 многие свойства приходится прописывать отдельные для каждого браузера. В основном это касается FF, так как большинство свойств требуется переопределять именно для этого браузера. Но вот свойство transform вообще полнейший бред. Для каждого браузера своё свойство для одного и того же %)

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

Почему же такое допускается вообще Нахмурился Нахмурился Нахмурился
 
 Top
Данил_123
Отправлено: 27 Августа, 2011 - 21:57:47
Post Id


Участник


Покинул форум
Сообщений всего: 1027
Дата рег-ции: Июнь 2011  
Откуда: rostov


Помог: 9 раз(а)




по мне самым безопасным способом загрузки данных были разнообразные клиенты.. Всегда пользовался WinSCP и доволен работой


-----
http://mysitecost.ru
 
 Top
vlom
Отправлено: 27 Августа, 2011 - 22:12:45
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 681
Дата рег-ции: Окт. 2010  
Откуда: Екатеринбург


Помог: 4 раз(а)




Данил_123 пишет:
по мне самым безопасным способом загрузки данных были разнообразные клиенты.. Всегда пользовался WinSCP и доволен работой

да это было и останется так для большинства разработчиков, но тут же речь идет об удобстве заказчика
 
 Top
alxfro
Отправлено: 20 Июня, 2012 - 17:33:03
Post Id



Частый гость


Покинул форум
Сообщений всего: 208
Дата рег-ции: Июль 2011  


Помог: 0 раз(а)




Haron пишет:
На самом деле - не существует никакой AJAX-загрузки файлов на сервер. ...


Haron, вам надо было на хабре подобное публиковать Улыбка
 
 Top
armancho7777777 Супермодератор
Отправлено: 20 Июня, 2012 - 18:22:44
Post Id



Активный участник


Покинул форум
Сообщений всего: 4473
Дата рег-ции: Февр. 2011  
Откуда: Иркутск, Россия


Помог: 215 раз(а)




Удивляюсь, что не слышали про эту библиотеку))
Только ею и пользуюсь))
Кробраузерно и без тормозов.
input[type=file] задаём прозрачность + 1000x1000px + font-size 500px;
Помещаем в контейнер с overflow == hidden.
По событию change отправляем форму.
В ответ можно отправить название и путь загруженной картинки после обработки и вставить в DOM.
Ну, и так же в ответ можно отправить сообщения об ошибках по типу json и т.д.

(Отредактировано автором: 20 Июня, 2012 - 18:36:27)



-----
Болтовня ничего не стоит. Покажите мне код.
-Linus Torvalds
 
 Top
IllusionMH
Отправлено: 20 Июня, 2012 - 23:23:15
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




В код не вчитывался, но похоже что тут действительно асинхронная передача файлов(чанками) на сервер. Рассчитано на передачу больших файлов с возможностью паузы/возобновления(и продолжения при разрыве связи)
Правда только для нормальных браузеров с поддержкой Files API
Resumable[dot]js: Fault Tolerant Resumable File Uploads in JavaScript
Git repo

(Отредактировано автором: 20 Июня, 2012 - 23:25:41)

 
 Top
IllusionMH
Отправлено: 20 Июня, 2012 - 23:27:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)




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+.
 
 Top
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Хранилище функций на JavaScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB