Регистрация
Вход через соцсети
Восстановление пароля

Пакетная загрузка файлов при помощи jQuery Uplodify (релиз)

Новый топик
Страницы: 1  |  2  |  3
06.04.2010, 15:18
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

Потратил несколько часов, чтобы качественно вписать в свою фотогалерею функционал пакетной загрузки файлов через традиционную связку Flash+JS.
Использовал готовую библиотеку http://www.uploadify.com/

Никакого кодинга на PHP или изменения файлов ядра неткета не потребовалось, но действий пришлось совершить много. В общем, если кому-то это надо, могу описать. На сервер пока не выкладывал, показать не могу.

Все, что потребовалось, это интегрировать в макет дизайна и формы добавления нужные куски кода. Помимо этого потребовалась функция iconv от PHP, чтобы конвертировать сообщения сервера, приходящие в кодировке Windows-1251, в UTF-8, как того требуется jQuery.

Изображение

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
06.04.2010, 16:18
Ответить | Цитировать
malich
Андрей Малков

Зарегистрирован:
2005-08-09
Сообщений: 522

MipH очень бы хотелось получить рабочий код вашего функционала.
06.04.2010, 16:52
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

ПОСМОТРЕТЬ РАБОТУ можно по этой ссылке http://www.bbz.ru/fotos/add_fotos.html (необходимо быть авторизованным, регистрация там же)

1.
Копируем файлы плагина куда-нибудь. Я положил в /images/js/uplodify/
Нам нужны: cancel.png, jquery.uploadify.v2.1.0.min.js, swfobject.js, uploadify.swf

2.
В папке sample архива плагина есть CSS, которые надо скопировать к себе в проект (как вам угодно), чтобы они подцеплялись на те страницы, где будет использоваться функционал.

3.
В макет дизайна в <header> подключаем скрипты:
Код:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src="/images/js/uplodify/swfobject.js'
<script type='text/javascript' src='/images/js/uplodify/jquery.uploadify.v2.1.0.min.js'></script>


4.
Делаем альтернативную форму добавления в том компоненте, к которому мы все это прикручиваем. Главное тут ОБЕРНУТЬ весь контент этого поля в
Код:
".opt(!$isFlash,"ТУТ АЛЬТЕРНАТИВНАЯ ФОРМА, т.е. весь контент")."
".opt($isFlash && $warnText,iconv("Windows-1251", "UTF-8", "Ошибка: $warnText"))."

Саму форму я тут приводить не буду, она стандартная, ее вообще может не быть =) Под формой надо вставить еще один opt, как написано в примере, это вывод ошибки $warnText + преобразование кодировок. Это нам нужно, чтобы в случае ошибки мы Флэшу вернули только текст ошибки и ничего больше, никаких форм.

5.
Немного поправим альтернативную форму добавления, собственно, добавим саму кнопку пакетной закачки файлов:
Код:
<input type='file' name='uploadify' id='uploadify' style='display:none;'/> 
<a href="javascript:$('#uploadify').uploadifyUpload();" class='size13'>ЗАГРУЗИТЬ ВЫБРАННЫЕ ФАЙЛЫ</a> |
<a href="javascript:$('#uploadify').uploadifyClearQueue();">очистить список</a>
<div style='display:none;color:red;' class='size12' id='uplodify-errors'></div>

Тут мы вставили наши главные элементы и вызовы. В диве с id='uplodify-errors' будут показываться ошибки, если есть. <input> замениться на флэшувую кнопку выбора файлов.

И где-то ниже объявление параметров и функций:
Код:
<script type='text/javascript'>
$(document).ready(function() {
$('#uploadify').uploadify({
'uploader': '/images/js/uplodify/uploadify.swf',
'script': '/netcat/add.php',
'folder': '/images/js/uplodify/uploads-folder',
'cancelImg': '/images/js/uplodify/cancel.png',
'multi': true,
'queueSizeLimit': 20,
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'sizeLimit': '4000000',
'fileDataName': 'f_Photo',
'scriptData': {'isFlash':'1',
'cc':'".$cc."',
'sub':'".$sub."',
'catalogue':'".$catalogue."',
'curPos':'',
'posting':'1',
'isNaked':'1',
'PHP_AUTH_SID':'".$PHP_AUTH_SID."'},
onError: function (a, b, c, d) {
if (d.status == 404)
alert('Could not find upload script. Use a path relative to: '+'<?= getcwd() ?>');
else if (d.type === "HTTP")
alert('error '+d.type+": "+d.status);
else if (d.type ==="File Size")
alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
else
alert('error '+d.type+": "+d.text);
},
onComplete: function(a, b, c, d, e){
if (d != '1') {
$('#uplodify-errors').css('display', 'block' );
$('#uplodify-errors').append('<br />' + d);
}
},
onAllComplete: function(a, b){
document.getElementById('foto-list').contentDocument.location.reload();
},

onSelect: function(a, b, c){
$('#uplodify-errors').css('display', 'none' );
$('#uplodify-errors').empty();
}
});
});
</script>


6.
В действии после добавления обязательно сделать корректный возврат данных:
Код:
";
if ($isFlash) echo "1";
else echo "".opt_case(!$admin_mode,"Файл добавлен.","Объект добавлен.<br>
<a href=/netcat/?catalogue=$catalogue&#8834;=$sub>Вернуться в раздел</a>")."";
echo "

Это опять же нужно для Флэша, который ожидает увидеть корректные данные. Ну и если мы не Флэш, то вернем человекопонятные данные.

7.
Если в настройках поля компонента стоит что-то типа:
Код:
4000000:image/*

то надо оставить только
Код:
4000000

т.к., к сожалению, флэш не умеет передавать-определять mime-nипы (пруф где-то был в интернете). Последствия этого описаны немного тут.

ПОСМОТРЕТЬ РАБОТУ можно по этой ссылке http://www.bbz.ru/fotos/add_fotos.html (необходимо быть авторизованным, регистрация там же)

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
06.04.2010, 20:39
Ответить | Цитировать
malich
Андрей Малков

Зарегистрирован:
2005-08-09
Сообщений: 522

Большое спасибо, все отлично работает.
За долгое время, действительно полезная тема.
06.04.2010, 22:23
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

Меня убивает поиск на этом сайт, меня убивает форум на этом сайте, меня убивает сайт. Но еще больше меня убивает, что никакого функционала для неткета в сети найти нельзя, все приходится делать самому. И даже раздел, некогда бывший на этом сайте под названием База знаний, закрыли, потому что все в нем устарело. =(

С другой стороны, мне нравится покопаться в чем-то необычном.

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

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
07.04.2010, 03:28
Ответить | Цитировать
DiGGy
DiGGy
DiGGy

Зарегистрирован:
2005-04-04
Сообщений: 1546

Я бы добавил еще пару комментов:
1. Обязательное наличие компонента "фотогалереи" с полем типа "файл" (только это поле должно быть обязательным среди других полей компонента), т.е. на каждую фотку - отдельная запись в таблице компонента.
2. В данном решении фотки привязываются к теме, которая может быть не создана. В общем, нужен скриптик, который бы удалял фотки непривязанные к теме. (кстати, если страничку обновить, то все загруженные фотки пропадают - это собственно по той же причине)
3. При пакетной загрузке нельзя указать описание фотки.

В целом, учитывая визуализацию данного процесса, решение попроще, чем мои самописные скрипты на аяксе. Уважуха те Димыч круто

MipH писал(а):
... все приходится делать самому.

и в этом есть много плюсов да (как минимум деградация не грозит!)

Temet nosce...
07.04.2010, 08:11
Ответить | Цитировать
malich
Андрей Малков

Зарегистрирован:
2005-08-09
Сообщений: 522

Если бы еще знающий человек грамотно описал работу с формами посредством аякса, наступило бы блаженство. :-)
07.04.2010, 10:27
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

malich писал(а):
Если бы еще знающий человек грамотно описал работу с формами посредством аякса, наступило бы блаженство. :-)


В чем проблема? Закачка файлов выше - та же самая работа с формой, с формой загрузки файла.

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
07.04.2010, 10:30
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

DiGGy писал(а):

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

Как это обязательно? =) Прикрути к любому другому компоненту, это не проблема.

DiGGy писал(а):

2. В данном решении фотки привязываются к теме, которая может быть не создана. В общем, нужен скриптик, который бы удалял фотки непривязанные к теме. (кстати, если страничку обновить, то все загруженные фотки пропадают - это собственно по той же причине)

Для моего проекта это некритично, да и искриптик есть, но решить в целом проблему можно разными способами, если надо.

DiGGy писал(а):

3. При пакетной загрузке нельзя указать описание фотки.

Найди другой плагин, где есть описание, делов то подать это описание в виде нужной переменной в том же самом POST, в котором файл передаешь. Впрочем, это можно и в моем решении сделать, благо исходники плагина есть, но мне это не нужно было.

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
07.04.2010, 14:56
Ответить | Цитировать
chuc

Зарегистрирован:
2009-10-08
Сообщений: 43

Я правильно понимаю, что после того как ты выбрал фотки и нажал загрузить, они добавляются в базу в таблицу Filetable а после того как мы нажимает разместить фотоотчет то в таблицу компонента добавляется запись с ID фотки из таблицы Filetable и к какойму альбому она принадлежит, так чтоль?

не знаю как вы ребят я ет щитаю идиотизмом, полностью согласен с DiGGy!
Нафига нам лишний раз обращаться к базе и темболее в нее чет записывать до того момента пока пользовательно даж не уверен что он нажмет кнопку разместить фотоотчет, я бы сделал какую нибудь дополнительную таблицу в которую бы скидывал все эти фотки с IP, session_id, чтоб при перезагрузки страницы они все равно оставались у тебя в этом поле а после того как размещал бы фотоотчет удалял бы запись из таблицы и фотки из временной директории

Ктаму же что это у вас такое?)) Это так надо?))
http://www.bbz.ru/fotos/foto/foto.html

makushkin
07.04.2010, 15:35
Ответить | Цитировать
MipH
Спирин Дмитрий
MipH

Зарегистрирован:
2004-12-22
Сообщений: 252

chuc писал(а):
Я правильно понимаю, что после того как ты выбрал фотки и нажал загрузить, они добавляются в базу в таблицу Filetable а после того как мы нажимает разместить фотоотчет то в таблицу компонента добавляется запись с ID фотки из таблицы Filetable и к какойму альбому она принадлежит, так чтоль?

не знаю как вы ребят я ет щитаю идиотизмом, полностью согласен с DiGGy!
Нафига нам лишний раз обращаться к базе и темболее в нее чет записывать до того момента пока пользовательно даж не уверен что он нажмет кнопку разместить фотоотчет, я бы сделал какую нибудь дополнительную таблицу в которую бы скидывал все эти фотки с IP, session_id, чтоб при перезагрузки страницы они все равно оставались у тебя в этом поле а после того как размещал бы фотоотчет удалял бы запись из таблицы и фотки из временной директории

Ктаму же что это у вас такое?)) Это так надо?))
http://www.bbz.ru/fotos/foto/foto.html


Такс, еще раз внимательно читаем ТЕМУ поста: "Пакетная загрузка файлов при помощи jQuery Uplodify (релиз)". Фотогалерею я привел в качестве примера, не надо примешивать и писать не по теме =)
Указанный мною пример реализации заданного можно прикрутить к любому шаблону и не извращаться, как это сделал я с фотогалереей. Я всего лишь по максимуму использовал уже готовый в NetCat функционал, чтобы не программить много.

Вместо пустой болтовни лучше бы написали хорошее решение.

За ссылку спасибо, поправлю.

bbzone@gmail.com | bbz.ru | miph.info | miph.ru
Вы можете обратиться ко мне, если необходима разработка функционала на NetCat
198 196 2011-11-30 08:29:23 9912
Страницы: 1  |  2  |  3
Описание проекта