войти зарегистрироваться

jQuery whois

индекс
190,00

ajax загрузка нескольких файлов с php формой

Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.

Так же был написан простейший php-скриптик (файл doajaxfileupload.php).

Теперь чуть подробнее обо всём.

Плагин Multiple File Upload позволяет выбирать несколько файлов для загрузки, так же он позволяет ограничивать типы файлов, количество выбираемых файлов, проверяет, выбран ли уже файл и многое другое. Использована последняя версия плагина, однако для нормальной работы с моей php формой были изменены две строчки, они помечены текстом " — replace by spiritzzz ".

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

BlockUI Plugin служит лишь для декоративных целей, выводит красивые сообщения об ошибках плагина Multiple File Upload, его можно и не использовать.

В архиве, ссылку на который можно найти ниже, лежат самые свежие версии этих плагинов, а так же два php файлика — index.php и doajaxfileupload.php.
В index.php собственно и находится html форма, подгружается jQ и все плагины:

$('.MultiFile').MultiFile({
  accept:'jpg|gif|bmp|png|rar', max:15, STRING: {
    remove:'удалить',
    selected:'Выбраны: $file',
    denied:'Неверный тип файла: $ext!',
    duplicate:'Этот файл уже выбран:\n$file!'
}});  

* This source code was highlighted with Source Code Highlighter.
 — тут указываются разрешённые расширения файлов, максимальное их колличество (15), а так-же идет локализация сообщений об ошибках.

$("#loading").ajaxStart(function(){({
 ...
});

* This source code was highlighted with Source Code Highlighter.
 — показывает и прячет картинку анимации при отправке

$('#uploadForm').ajaxForm({
 ...
});

* This source code was highlighted with Source Code Highlighter.
 — отвечает за отправку файлов на сервер

doajaxfileupload.php рассматривать не буду, там всё достаточно просто, а если будут вопросы — пишите в комментариях.

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

Скачать настроенную, подточенную всю эту штуку можно тут

UPD. Вот онлайн-пример (разрешены только файлы с расширением jpg, размером неболее 100кб и 3 штуки за раз)
+42
25 января 2009, 23:10
SpirITzzz

комментарии (55)

  • а пример?
  • проверяли совместимость для разных браузеров после фиксов?
    • да, фиксы незначительные, но жизненно необходимые :)
  • кстати у jquery есть отличный инструмент тестирвания браузеров на совместимость jquery.com/test/
    ВЫввоит каки еошибки могут возникунть в вашем брузере например в бете chrome наблюдался ряд проблем
  • спасибо, посмотрим…
    • PIT
    • PIT
    • 26 января 2009, 00:37
    • #
      • 0
    Несколько файлов выбирать можно, но по одному.

    Подскажите пожалуйста плагин для выбора нескольких файлов прямо в окне. Пример тут: files.mail.ru/Z19B77 (нажмите на «Обзор»).
    • подскажу завтра линком. на работе есть подобный плагин.
    • у них там флэшевый загрузчик
    • Советую посмотреть в сторону digitarald.de/project/fancyupload/
      • как я понял, это для MooTools?
        • Да. Но можно и для jQuery наверное сделать, там главное понять принцип, он примерно такой:

          1. На страницу кладем флешку. Из-за 10 флеш плеера кнопку выбора файлов нужно делать на ней.
          2. Флеш позволит нам в одном окне выбрать несколько файлов, проверить размер, тип и т.д., для этого юзаем FileReference
          3. Из флеша уже можем передавать на страницу процесс зарузки и момент ее завершения.
          • >FileReference

            Упс, для аплоада нескольких файлов нужен FileReferenceList
      • Классно. А вам что-нибудь известно о том как это делается?
        Я думал что к окну выбора файла доступ получить нельзя. Или там какой-то хитрый флеш?
        • флеш, он самый :)
        • Ой. Не обновился. Ответ выше увидел.
          Спасибо.
      • Есть еще такой проект swfupload.org/
        • Тоже самое)
      • Да, кстати тоже недавно открыл для себя это решение. Очень понравилось. Единственный минус — требуется наличие установленного флэша, иначе не работает.

        З.Ы. На оф. сайте руководство и сорцы как-то беспорядочно лежат, имхо. Но разобраться можно :)
    • я в своем проекте использовал YUI Uploader, правда пришлось сильно переделать под себя.
  • Этот скрипт позволяет загружать несколько файлов, но не выбирать_несколько_файлов и загружать.
    • да, именно. Лично мне не было в этом необходимости, но если сильно нужно, могу покапать на эту тему :)
    • Javascript никогда не даст возможность выбирать несколько файлов одновременно. Флеш. Да. JS нет.
      • ну именно флеш я и имел ввиду, я видел много таких готовых решений, приспособить их сюда будет не так уж и сложно, наверное… :)
  • гораздо лучше, если множественный выбор, но плюсик все-равно Ваш :)
    • а какие знаете штуки для множественного выбора?
  • штука хорошая, сам использую
  • Извиняюсь за придирки, способ действительно хороший, но причем тут, собственно, ajax?
    • вот и я понять не могу. все давно знают, что через ajax загружать файлы нельзя :)
  • Плагин для jquery и prototype Ajax file upload. Обеспечивающий туже функциональность.
    • да, так и есть. Но когда я делал свой вариант, его тогда еще не существовало :(
      да и сборка из этих плагинов, что я описал, более гибкая, позволяет настроить больше всяких вкусностей :)
  • Мне кажется для загрузки нескольких файлов это будет намного удобнее. swfupload.org/
  • Странно что автор ничего не пишет про самое главное… jquery тут занимает отнють не главную роль. Описал бы лучше принцип работы флешки.
    • а где вы тут флешку видите? ;)
      • все ясно… название темы не отражает действительности. никакого ajax нету. или я ошибаюсь?
  • Не хочу показаться занудой, но → demo.swfupload.org/v220beta3/applicationdemo/index.php
    • да, уже пару комментариев назад была ссылка на ето чудо :)
  • Хм… JPEG и весом меньше 100кб, а результат такой вот:

    Form success handler received: string

    {error: '',
    msg: ' File Name: car1.jpg
    File Type: image/jpeg
    File Size: 96.5146484375Kb'
    }
    • Пример не смотрел но судя по тому, что вы написали, все правильно.
      • Ах, да, точно. Видимо, сказывается недосып :)
  • А архив с примером? скачать? :)
  • Это всё хорошо конечно, но по сути не решает проблемы каждый раз клацать на кнопку «обзор», выбирать файл, «ОК» и по новой, а если файлов штук 50? Вот на фликре удобно сделано (похоже через флеш както), если бы кто рассказал как, был бы очень благодарен
  • у меня это сделано через fancyupload + sortableList из scriptaculous для дальнейшей сортировки мышкой + ввода описалова и создания галереи
    • а не поделитесь? ;)
      • там работы на 10 минут, чем делиться-то?
        • работой, за 10 минут )))
          • используется на корпоративном сайте, показывать не могу, заливать на другой хостинг лениво. обвязка элементарная. в чем проблема-то? руки.сис? :)
            я ж сказал: фенсиаплоад (скачать и прочитать доку) + sortablelist (скачать и прочитать доку). всё
            • не, не руки, а скорее лень.сис :) но всё равно спасибо )
  • Это все фигня. По причине того, что таких аплоадеров написано уже много, да и собственно, там и изобретать нечего. Вот если бы кто-то написал как сделать аплоадер для больших файлов (~20-30Mb) — вот это бы было очень познавательно.
    Передо мной стояла такая задача, так я её так и не нешил (в виде какого-то скрипта). Пришлось в проект прикручивать отдельный, инсталируемый загрузчик, что есть не гут.
  • Приветствую!
Ваши посты мне понравились на хабре. Я сейчас ищу срочно программиста для доводки проекта.
Оплата достойная, требования — тоже.
Пожалуйста, ответьте мне на мейл, я перешлю Вам ТЗ.
Заранее спасибо! Удачного дня! 

  • А где post, get формы пропали?
    print_r($_POST);
    print_r($_GET);
    print_r($_FILES);


    Только files

    Сыроват, обычно вместе с files передают с формой еще какие либо величины формы.
  • в новой опере 10, jQuery Form Plugin отказывается работать, можт кто сможет подсказать решение данной проблемы, да и вообще новая опера как-то не стабильно ведёт себя с javascript ( JQuery )
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.