Стена с добавлением фотографий

Итак, вы разобрались как сделать стену подобно контактовской, но вам этого мало, так как вы создаете соцсеть для шпионов и хотите иметь возможность заливать компромат закачивать фотографии прям как в нешпионском контакте. Что ж, вас можно понять >B) Поэтому я решил описать, как своими силами реализовать подобный функционал.

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

Скрипт заливки с нуля писать не будем, нафиг надо изобретать велосипед, когда в интернете уже есть неплохие "мотоциклы" :) Я обычно использую Uploadify, он мне нравится, но я решил для расширения кругозора попробовать что-то еще. Нашел один вместе с туториалом здесь и слегка модифицировал.

Итак, создадим на сервере папку /user-uploads, в ней при загрузке будут создаваться подпапки соответственно году и месяцу, например /user-uploads/2014/03 (это, конечно, не обязательно, но когда у вас в папке будет лежать сто тысяч миллионов фотографий, то... ну не знаю, терпеть не могу подобные бардаки).

Если вы помните, то все сообщения со стены сохраняются в таблице `user_walls`, но там недоставало поля, в котором можно было бы хранить список ID загруженных фотографий. Так что заодно нам нужно создать таблицу, в которой мы будем регистрировать все закачиваемые изображения.

CREATE TABLE `pictures` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `file` varchar(500) NOT NULL,
 `timestamp` int(10) unsigned NOT NULL,
 `user` int(10) unsigned NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Тут вроде все понятно - в `file` сохраняем путь и имя файла, в `user` будет id пользователя, который выкладывает компромат 8)

Также в таблицу стены добавляем текстовое поле:

ALTER TABLE `user_walls` ADD `images` TEXT NULL

Что именно нам нужно сделать:
- на стене теперь будет кнопка "Добавить фотографии"
- при нажатии и выборе нужных картинок происходит их загрузка на сервер
- на сервере создаются уменьшенные копии (thumbnails), понятно для чего...

Не буду расписывать, что конкретно поменял на странице стены, вы все равно исходник качать будете, так что вот =)

Также не буду приводить исходник функции для уменьшения изображений, так как уже приводил.
Зачем их уменьшать, если можно задать максимальные размеры через CSS? Потому что это не фэн шуй! Скорость загрузки страницы, бла-бла-бла и все дела.

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

Подключил скрипт Fancybox, чтобы картинки можно было увеличивать по клику (а вообще там можно много чего еще полезного делать).

При отправке ajax-ом данных мы больше не будем писать

{'message': $('#message').val(), 'user': <?=$user?>}

т.к. это немного калично, проще использовать jQuery-функции serialize и serializeArray. Они как раз тем и занимаются, что приводят элементы страницы к этому виду. 
Главное, чтобы у этих элементов был атрибут name и желательно какой-нибудь класс.

Т.е. если у нас будет

<input type="text" name="message" value="hello" class="send">
<input type="hidden" name="user" value="1" class="send">


то используя $('.send').serialize(), вы получите message=hello&user=1
а с помощью $('.send').serializeArray(), получаем {'message': 'hello', 'user': 1}

Все просто :)

Далее, где-то в коде я использую функции json_encode и json_decode, с их помощью можно структуры данных (массивы, объекты) приводить к строке, и потом при необходимости - обратно в первоначальный вид. Подробнее о json можно почитать здесь.

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

За сим откланиваюсь, исходник вот, удачи вам, товарищи! :)

P.S. Хотя, может быть, в ближайшее время сооружу демку к этой статье.

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.