@DarthRaven16 ноя 2009 в 17:15

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

30 мин

19K

jQuery *

+61

Комментарии 98

@kostyl 16 ноя 2009 в 17:33

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

@DarthRaven 16 ноя 2009 в 17:45

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

@kostyl 16 ноя 2009 в 17:55

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

@DarthRaven 16 ноя 2009 в 17:58

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

@CHEM_Eugene 17 ноя 2009 в 09:35

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

@DarthRaven 17 ноя 2009 в 14:57

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

@yAnTar_yAnTar 12 янв 2010 в 11:26

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

@Koc 17 ноя 2009 в 10:33

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

@DarthRaven 17 ноя 2009 в 14:56

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

@Koc 17 ноя 2009 в 15:10

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

@DarthRaven 17 ноя 2009 в 15:12

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

@DarthRaven 17 ноя 2009 в 05:10

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

@absolvo 16 ноя 2009 в 17:40

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

@DarthRaven 16 ноя 2009 в 17:45

Ответ выше )

@kostyl 16 ноя 2009 в 17:54

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

@DarthRaven 16 ноя 2009 в 17:55

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

@kostyl 16 ноя 2009 в 17:56

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

@PavloPoliakov 16 ноя 2009 в 18:00

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

@DarthRaven 16 ноя 2009 в 18:10

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

@SkPavel 17 ноя 2009 в 08:12

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

@NeX 16 ноя 2009 в 18:04

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

@DarthRaven 16 ноя 2009 в 18:09

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

@magicstream 16 ноя 2009 в 21:57

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

@DarthRaven 17 ноя 2009 в 01:13

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

@kmike 17 ноя 2009 в 06:05

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

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

@kmike 17 ноя 2009 в 06:09

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

@DarthRaven 17 ноя 2009 в 06:11

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

@kmike 17 ноя 2009 в 06:14

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

@DarthRaven 17 ноя 2009 в 06:16

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

@AndrewGets 17 ноя 2009 в 07:19

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

@DarthRaven 17 ноя 2009 в 07:20

спасибо )

@golem 17 ноя 2009 в 08:10

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

@DarthRaven 17 ноя 2009 в 08:14

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

@keltanas 17 ноя 2009 в 08:20

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

@DarthRaven 17 ноя 2009 в 08:23

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

@DarthRaven 17 ноя 2009 в 08:33

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

@keltanas 17 ноя 2009 в 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 17 ноя 2009 в 09:46

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

@acy 17 ноя 2009 в 09:51

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

@DarthRaven 17 ноя 2009 в 14:59

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

@skorney 17 ноя 2009 в 09:49

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

@skorney 17 ноя 2009 в 09:51

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

@DarthRaven 17 ноя 2009 в 15:00

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

@Stom 17 ноя 2009 в 10:39

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

@Stalker_RED 19 ноя 2009 в 02:11

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

@Stom 19 ноя 2009 в 10:03

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

@Stalker_RED 19 ноя 2009 в 18:53

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

function_exists(«uploadprogress_get_info»)

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

@myem 17 ноя 2009 в 11:43

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

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

@DarthRaven 17 ноя 2009 в 15:04

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

@webwin 17 ноя 2009 в 12:03

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

@DarthRaven 17 ноя 2009 в 15:03

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

@webwin 17 ноя 2009 в 16:19

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

@DarthRaven 17 ноя 2009 в 16:48

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

@webwin 17 ноя 2009 в 20:31

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

@webwin 17 ноя 2009 в 20:44

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

@webwin 17 ноя 2009 в 20:45

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

@angizij 17 ноя 2009 в 13:01

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

@DarthRaven 17 ноя 2009 в 15:45

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

@vipfocus 17 ноя 2009 в 20:46

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

@DarthRaven 18 ноя 2009 в 03:43

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