Red Spirit

Блог Алексея Таянчина

RSS 2.0

Загрузчик фотографий ВКонтакте для своего сайта

Все, кто проводят свое свободное время в социальной сети ВКонтакте знают как удобно там загружать свои фотографии – выбираешь сразу кучу фоток, они отображаются в браузере в виде списка, где их можно либо повернуть в любую сторону, либо совсем удалить, а потом нажатием одной кнопки все они загружаются на сервер вконтакта. Красота! Помимо всего прочего, этот загрузчик еще экономит время загрузки путем оптимизации фотографий на стороне клиента, сжимая через чур большие изображения.

Я захотел для своего сайта подобный загрузчик, начал искать готовые решения – не нашел. Тогда и решил взять и портировать этот самый вконтактовский загрузчик для своего сайта, к счастью, никаких защитных механизмов не оказалось. Сам загрузчик состоит только из одного SWF файла 195 кб весом, очень компактный надо сказать.

И так, что надо, чтобы поставить такой загрузчик себе?

  1. Сам “свиф” файл загрузчика.
  2. Библиотечку swfobject2.js для встраивания загрузчика в HTML-страницу (не обязательно).
  3. Набор переменных (flashvars) для задания параметров загрузчика.
  4. Скрипт для приема и загрузки файлов на стороне сервера, в нашем примере я приведу код такого скрипта на PHP.

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

Это картинка

В архиве есть файл index.html куда встраивается сам загрузчик, в нем же прописываются параметры для него, в частности можно изменить любой текст на свой (для локализации) и изменить такие параметры, как jpeg качество выходной фотографии, а также очень важные для нас параметры URL серверного скрипта для отправки файлов (upload_url) и URL страницы на которую будет происходить редирект после загрузки всех файлов (redirect_url).

Есть еще одна деталька, как вы помните, ВКонтакте загрузчик позволял загружать “только” до 50 фоток за раз (это на самом деле не мало), но мы можем изменить это число на любой другое с помощью параметра max_images. В своем примере я увеличил лимит до 100.

PHP код для приема файлов на сервере до безобразия прост, в минимальном варианте он будет выглядеть так:

Тут мы просто перечисляем все файлы, которые получили и сохраняем их в папку uploaded_files. Помните, что файлики передаются частями, скрипт вызывается каждые 4 файла, а о номере партии загрузки красноречиво говорит partNum, правда, на деле я этой переменной применения не нашел.

Вот так все и работает, если вам достаточно того, что предоставляет этот загрузчик, можете его использовать на своем сайте. А вот мне, как оказалось, он не подошел. Дело в том, что он все поступающие картинки конвертирует в JPG, а в моих планах обязательно надо загружать анимированые GIF-ы. Я надеялся, что смогу декомпилировать SWF файл и внести в него нужные мне изменения в Adobe Flash CS4, но ничего не получилось, вылавливаю кучу ошибок при обратной компиляции. Так что сейчас уселся за изучение Adobe Flex и ActionScript3, чтобы написать свой собственный вариант приложения пакетной загрузки файлов.

Забыл еще кое что… Этот загрузчик написал Андрей Рогозов за это ему спасибо! :)

  • falstaf

    move_uploaded_file без предварительного is_uploaded_file – серьезная брешь в безопасности. как минимум вспомним возможность атаки с использованием нулл-байта :)

  • http://redspirit.ru Red Spirit

    Согласен :) Но это типа минимальный код для принятия файлов. Но так уж и быть, допишу проверку.
    (обновил пост)

  • falstaf

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

  • http://profiles.google.com/xclu7ive Антон Сидоров

    Как можно решить проблемму
    IOErrorEvent type=”ioError” bubbles=false cancelable=false eventPhase=2 text=”Error #2032″

  • http://redspirit.ru Red Spirit

    По-больше бы информации. Код запускаемых скриптов, на каком сервере, на каком браузере, все обстоятельства так сказать.

  • Worker Hot

    ребята привет, долго искал этот модуль и наконец-то нашел. Каким образом можно изменить дизайн этого блока для загрузки фотографий?

  • http://redspirit.ru Red Spirit

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

  • slam

    а есть такое же. только для видео?

  • http://redspirit.ru Red Spirit

    Такого не встречал. Видео, мне кажется, лучше по одному файлу загружать. Вот как на youtube.

  • http://twitter.com/himic3 Anton
  • http://redspirit.ru Red Spirit

    Хых, интересно… спасибо за ссылку!

  • Elektra

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

  • http://redspirit.ru Red Spirit

    Вот тут http://redspirit.ru/wp-content/uploads/vk_uploader.zip есть полный рабочий пример, в файле index.html прописываются все параметры flashvars которые указывают, как будет работать сам загрузчик. Менять там практически ничего не надо, в большинстве случаев достаточно просто поменять имена (и, если надо, пути) к файлу приема (load.php) и файлу редиректа, куда после загрузки перейдет браузер (page.html). И естественно, что все это должно работать на хостинге с поддержкой PHP.

  • GinABore

    А может кто-нибудь подсказать как сделать чтобы на сайте выводились последние загруженные фотографии с этого загрузчика? У меня просто сайт самописный, а php я знаю ещё не настолько хорошо

  • http://redspirit.ru Red Spirit

    Ну это вопрос не в тему. Не важно чем загружать фотографии или любые файлы. При загрузке ты их просто запоминаешь в mysql а потом отдельным скриптом с помощью запроса с обратной сортировкой выводишь на экран. Учить php и mysql

  • http://www.facebook.com/people/Sergo-Sev/100001217464793 Sergo Sev

    Загрузчик не работает, ошибка
    [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2032"]

    Это в настройках сервера проблема или он действительно перестал работать?

  • http://redspirit.ru Red Spirit

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

  • http://www.facebook.com/people/Sergo-Sev/100001217464793 Sergo Sev

    А можете демо тут на блоге сделать в отдельной папке?
    Ну или хотя бы проверьте сами – может во флешка была привязана к серверу контакта?

  • http://redspirit.ru Red Spirit

    Чтобы был домен. На локалхосте флеш не всегда работает когда дело касается передачи данных. Тоже самое было с моим чатом на флеше, с компа не работал, а с сайта на домене без проблем.

  • http://www.facebook.com/people/Sergo-Sev/100001217464793 Sergo Sev

    Я на VPS запускал и нифига он не захотел работать, а на обычном хостинге работает

  • Uasya

    Показатель выявления Virus Total 136

  • Dmitry

    У меня не хочет работать =( Скачал и распаковал архив. Запустил Index.html, нажал загрузить, выбрал картинку – и дальше все. Висит картинка передачи, ничего не двигается, а кнопка “прервать” подсвечивается при наведении, но ничего не делает при нажатии.

  • http://redspirit.ru Red Spirit

    Надо запускать под доменом на локальном или удаленном сервере. Если путь до файла будет типа file:///C:.. то из-за политики безопасности флеша работа с файлами будет блокирована. Если запустить хотя бы с localhost то все заработает

  • Dmitry

    Большое спасибо =)