DarthRaven Nov 16 2009 at 17:15

jQuery плагин для получения данных формы + ajax аплоадер файлов

30 min

19K

jQuery*

+61

Comments 98

kostyl Nov 16 2009 at 17:33

А что, файл нельзя отправить?

DarthRaven Nov 16 2009 at 17:45

Так, а вот по этому поводу у меня есть следующая статья про, опять же, самописный jQuery плагин, служащий для ajax-upload`а файлов. Пока что анонс — для его работы не требуется Flash, только jquery + php. Если сервер поддерживает функцию uploadprogress_get_info, то включается и progress bar. Если функция отстутсвует в Вашей сборки, прогресс загрузки файла не будет отображаться.
В скором будущем — обязательно напишу о нем.

kostyl Nov 16 2009 at 17:55

Может лучше не flash, а iframe?

DarthRaven Nov 16 2009 at 17:58

Так я и говорю, что "для его работы не требуется Flash". То есть совсем ) Загрузчик как раз на iframe и работает )

CHEM_Eugene Nov 17 2009 at 09:35

Интересно, на многих shared-хотингах поддерживается uploadprogress_get_info? Я, например, про такую функцию первый раз слышу. Ведь вся прелесть данного загрузчика именно в прогресс-баре.

DarthRaven Nov 17 2009 at 14:57

А Flash частенько глючит и тормозит на линухах. Я так с ним намаялся на убунте, что решил, что такую проблему легче один раз решить на сервере, чем маяться с несовместимостью у каждого клиента.

yAnTar_yAnTar Jan 12 2010 at 11:26

uploadprogress_get_info — очень редко, где есть, да и работает эта функция ТОЛЬКО на РНР 5.3

Koc Nov 17 2009 at 10:33

uploadprogress обображает прогресс для всех файлов сразу. А решение на flash'е может показать прогресс по каждому файлу и в целом.

DarthRaven Nov 17 2009 at 14:56

Нет, не для всех. Ему методом POST передается уникальный идентификатор аплоада, и показывается статистика только по этой загрузке.

Koc Nov 17 2009 at 15:10

ок. У меня есть форма и количество прикрепляемых файлов может варьироваться. Хочу видеть статистику/прогресс загрузки по каждому из файлов и в целом.

DarthRaven Nov 17 2009 at 15:12

Сорри, не прочел с первого раза «и в целом». Да, так, конечно, не получится.

DarthRaven Nov 17 2009 at 05:10

Updated: загрузчик файлов добавлен )

absolvo Nov 16 2009 at 17:40

И правда, как дела с type=«file»?

DarthRaven Nov 16 2009 at 17:45

Ответ выше )

kostyl Nov 16 2009 at 17:54

Не, ну правильно же? Если делать — то до конца!!!

DarthRaven Nov 16 2009 at 17:55

Просто эйфория и желание скорее запостить первый топик ) Прошу извинить ;) Исправимся.

kostyl Nov 16 2009 at 17:56

Да ничё, я тоже чудил!!! ))

PavloPoliakov Nov 16 2009 at 18:00

Не забываем про существование замечательного плагин jQuery Form ( jquery.malsup.com/form/ ), который поддерживает асинхронную закачку файлов и прочие вкусности.

DarthRaven Nov 16 2009 at 18:10

Обязательно ознакомлюсь с ним ) Но сразу могу сказать, что uploader там не такой вкусный )

SkPavel Nov 17 2009 at 08:12

да при загрузке фалов был баг в опера 10, пробовал на версии jquery.form 2.28, файлы больше 1,5 мб не загружались или грузились через раз, а если загружал изображения и ещё их резал, то 100% обрубало загрузку, во всех остальных браузерах всё схватывало отлично

NeX Nov 16 2009 at 18:04

Получение всех данных из формы — $(«id»).serialize()

DarthRaven Nov 16 2009 at 18:09

Да, с этой функцией знаком, но соль в том, что хотелось получать объект, и как-то манипулировать им перед отправкой на сервер.

magicstream Nov 16 2009 at 21:57

serializeArray() возвращает массив объектов {name:'email',value:'xxx@xxx.xxx'}. Перебрать его в объект нужного вида не должно составлять труда. И манипулируйте на здоровье.

DarthRaven Nov 17 2009 at 01:13

И эту функцию тоже видел ) Но хотелось все же просто ключ: значения. В целом, конечно, на вкус и цвет )

kmike Nov 17 2009 at 06:05

Тоже не так давно писал загрузчик/сабмиттер форм ( bitbucket.org/kmike/gearsuploader/ ), для работы нужен Google Gears (+mootools), если его нет — делается fall-back на обычную отправку форм. Умеет пережимать картинки на клиенте, показывать прогресс-бар при загрузке файла (изменения на серверной части не нужны), в качестве плюшки сделана интеграция с джанговскими формсетами (что позволяет делать массовую загрузку картинок с ресайзом на клиенте, не меняя код на сервере — используя там обычные formset'ы).

Но все пока не супер-продакшн качества. В ИЕ вроде не работает прогресс-бар, нужно смотреть. Кому интересно, можете потестировать. В репозитории есть пример django-проекта, хорошо бы еще php сделать) Тоже хотел про все это написать сюда на хабр с подробными инструкциями и примерами, но руки пока не доходят.

kmike Nov 17 2009 at 06:09

да, немного документации: bitbucket.org/kmike/gearsuploader/wiki/ru

DarthRaven Nov 17 2009 at 06:11

С ишаком действительно всегда много мороки. Я в своем загрузчике вроде поборол все его реинкарнации )
>>>Умеет пережимать картинки на клиенте
Не подскажете, этот функционал обеспечивается Google Gears, или чем-то другим?

kmike Nov 17 2009 at 06:14

Да, Gears'ом. Из-за этого функционала все и затевалось, по сути. Остальное (загрузка обычных файлов, отправка форм) — побочные эффекты.

DarthRaven Nov 17 2009 at 06:16

Пожалуй стоит с этой либой поплотнее познокомиться…

AndrewGets Nov 17 2009 at 07:19

молодцом, смотрится на 5.

DarthRaven Nov 17 2009 at 07:20

спасибо )

golem Nov 17 2009 at 08:10

Спасибо большое, именно это я и искал!

DarthRaven Nov 17 2009 at 08:14

не за что ) Очень приятно.

keltanas Nov 17 2009 at 08:20

В целом мне и обычный плагин форм нравится. У меня к нему свой класс на PHP написан. Сейчас еще со Smarty его пытаюсь подружить.
Но вот загрузчик файлов я себе позаимствую, немного переработав, если вы не против =))

DarthRaven Nov 17 2009 at 08:23

Для того и выкладывал ) Удачи вам разобраться с немножко сумбурным кодом загрузчика ) Хотя я его сегодня уже причесал немного) Заранее прошу прощения за отсутствие комментариев )

DarthRaven Nov 17 2009 at 08:33

Кстати, насчет PHP класса для плагина )
У меня для CodeIgniter написана модель, помогающая работать с данными, полученными посредством этого плагина. Имеются следующие методы:
get — получения данных по условию
set — установить новые значения
exist — проверить, существуют ли переданные в метод ключи в этом массиве
delete — удалить указанные ключи
deleteAllBut — удалить все ключи кроме указанных
sizeOf — количество ключей в указанном подмассиве
strlen — получает список ключей, а так же интервал min и max длины строки (можно каждому ключу задать свой интервал). И возвращает true, если все ключи прошли проверку, иначе — false. Так же если передать еще один флажок, то вернет развернутый отчет — true\false по каждому ключу.
setParams — заменить текущий массив для обработки на новый

keltanas Nov 17 2009 at 10:24

У меня формы завязаны на базу. Сначала описывается сама форма:

<?php
/**
 * Форма USERS
 */
$forms->create('users', array(

	'method' => 'post', // метод отправки
	'action' => '/ajax/xforms/action_users.php', // скрипт обработки
	'class' => 'standart', // CSS класс
	'table' => DBUSERS, // таблица БД

	'fields' => array(

			'id' => array( 'type' => 'hidden' ),

			'email' => array( 'type' => 'text', 'label' => 'Email', 'notice' => 'необходим для авторизации' ),
			'password' => array( 'type' => 'password', 'label' => 'Пароль', 'notice' => 'только чтобы изменить' ),

			'solt' => array( 'type' => 'hidden' ),
			'kod' => array( 'type' => 'hidden' ),

			'fname' => array( 'type' => 'text', 'label' => 'Фамилия' ),
			'lname' => array( 'type' => 'text', 'label' => '* Имя'/*, 'obligatory' => 1*/ ),
			'tname' => array( 'type' => 'text', 'label' => 'Отчество' ),

			'phone1' => array( 'type' => 'text', 'label' => 'Телефон' ),
			'phone2' => array( 'type' => 'text', 'label' => 'Факс' ),
			'phone3' => array( 'type' => 'text', 'label' => 'Мобильный' ),

			'firm_value' => array( // no DB
				'type' => 'suggest', 
				'label' => '* Фирма',
				'ajax' => '/ajax/suggest/sug_users_firms.php',
				'field_value' => 'firm',
			),
			'firm' => array( 'type'=>'hidden' ),
			
			'contr_value' => array( // no DB
				'type' => 'suggest', 
				'label' => 'Контрагент',
				'ajax' => '/ajax/suggest/sug_users_contr.php',
				'field_value' => 'contractor',
			),
			'contractor' => array( 'type' => 'hidden' ),
			
			'position' => array( 'type' => 'text', 'label' => 'Должность' ), // должность
			'otdel' => array( 'type' => 'text', 'label' => 'Отдел' ),
			'other' => array( 'type' => 'textarea', 'label' => 'Дополнительно' ),

			'date' => array( 'type' => 'hidden' ),
			'last_date' => array( 'type' => 'hidden' ),
			'ip' => array( 'type' => 'hidden' ),
			'fix_ip' => array( 'type' => 'hidden' ),
			'status' => array( 'type' => 'hidden', 'label' => '' ),

			'submit' => array( 'type' => 'submit', 'value' => 'Сохранить' ),

	),
));
?>

Поля, соответствующие таблице могут писаться в базу. В соответствии с ним происходит обработка в JS при вводе информации в фронтэнде и при сохранении в бакенде. отправка происходит через формы JQuery, если включен JS или как обычно, если выключен.
Есть реализация интеграции с Jquery-UI.

Так еще доступны типы int, float, select, radio и некоторые другие.

Сейчас доступны методы:

create() — создание формы (см. выше)
getForm( 'formname' ) — вернет описание формы, как массив выше
clear() — очистит значения value у полей
getPost() — дёрнет из поста соответствующие полям индексы (нужно, когда считывает отправленные данные, этот же метод производит чистку данных по типам)
setTable() — сохранит данные в таблицу БД
getTable() — загрузит данные из таблицы БД

getValue() — получить значение поля
getValues() — получить значения всех полей
setValue() — установить значение поля
setValues() — установить значения всех полей

setVariants() — установить варианты для полей select, radio и checkbox (порой надо, чтобы эти значения заполнялись динамически из базы, например)

write() — распечатает форму в автоматическом режиме (есть несколько вариантов)

setReadonly() — утановить поле в readonly (также может отменить readonly)
setRaedonlyAll() — установить все поля в readonly (также может отменить readonly)
setHidden() — делает некоторые поля скрытыми/не скрытыми
setTypes() — можно для некоторых полей поменять тип

Как-то так.

acy Nov 17 2009 at 09:46

Из селекта созвращаются только названия полей, а их values нет.

acy Nov 17 2009 at 09:51

Простите, не посмотрел код.

DarthRaven Nov 17 2009 at 14:59

Ага, значения полей тоже русские)

skorney Nov 17 2009 at 09:49

У вас много «зашитого» html кода внутри плагина — это не найс (например: «Загрузка началась. Пожалуйста, подождите...», там много такого). Можно все служебные тексты в отдельный json кусочек вынести. Я бы вообще не писал своих текстов а вызывал пользовательские функции, которые бы писали текст, если нужно.

skorney Nov 17 2009 at 09:51

часто делают объект settings с настройками по умолчанию, а потом делают его extend

DarthRaven Nov 17 2009 at 15:00

Да, я уже тоже подумываю о выносе всех языковых строк в настройки, для мультиязычности ) Это тоже обязательно будет сделано.

Stom Nov 17 2009 at 10:39

мне вот интересно а как получить скорость передачи файла?

Stalker_RED Nov 19 2009 at 02:11

размер файла, деленный на процент переданного, деленный на время?

Stom Nov 19 2009 at 10:03

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

Stalker_RED Nov 19 2009 at 18:53

чуть выше упоминали uploadprogress_get_info, да и в коде серверной части плагина она упоминается:

function_exists(«uploadprogress_get_info»)

можно еще поискать аналоги.

myem Nov 17 2009 at 11:43

Если не установлено раширение с uploadprogress_get_info, но установлено APC (что встречается), получить количество загруженного контента можно с помощью функции apc_fetch().

Пример, например, по ссылке
www.ibm.com/developerworks/library/os-php-v525/index.html

DarthRaven Nov 17 2009 at 15:04

Что ж, достаточно немного модифицировать upload.php )

webwin Nov 17 2009 at 12:03

Расскажите пожалуйста как подключить uploadprogress_get_info

DarthRaven Nov 17 2009 at 15:03

pecl.php.net/package/uploadprogress — вот ссыль на это расширение.

webwin Nov 17 2009 at 16:19

Опишите пожалуйста как его установить. Вещь нужная почти для каждого сайта.

DarthRaven Nov 17 2009 at 16:48

Сам я, когда разрабатывал этот плагин, просил установить uploadprogress нашего админа. Но вот навскидку ссылка:
andyceo.ruware.com/blog/andyceo/kak-ustanovit-pecl-biblioteku-na-server-ubuntu — как установить pecl-расширение на убунту.
handynotes.ru/2007/06/pecl-php.html — а это под виндой.
К сожалению, не смогу вам помочь полноценно =\
Если не вы админите серв, попробуйте попросить его владельцев поставить это расширение.

webwin Nov 17 2009 at 20:31

Спасибо. Первая ссылка не работает. Хабраэффект ?)

webwin Nov 17 2009 at 20:44

в папке где находится pecl нужно запустить
./pecl install uploadprogress
правда до конца не поставилась через
ERROR: `phpize' failed
использую XAMPP

webwin Nov 17 2009 at 20:45

docs.php.net/manual/ru/install.pecl.pear.php

angizij Nov 17 2009 at 13:01

Всё красиво, но вот только не хватает возможности выбора и загрузки сразу нескольких файлов

DarthRaven Nov 17 2009 at 15:45

Над множественным выбором обещаю подумать, как лучше реализовать )

vipfocus Nov 17 2009 at 20:46

Если еще и это реализуешь — цены тебе и твоему плагину не будет

DarthRaven Nov 18 2009 at 03:43

Реализовано! При инициализации makeUpload теперь можно передать еще один параметр multi:true. Демо обновлено