Блог Web-мастера

jQuery, php, CSS и немножко SEO


AJAX - upload файлов.

Современные сайтостроители не могут себе позволить обычный способ загрузки файлов с помощью поля <input type=”file” />. Он морально устарел по нескольким причинам:

  1. Можно загрузить только один файл.

  2. Требует перезагрузки страницы.

  3. Тяжело настроить его внешний вид.

Требуется инструмент, который обладал бы следующими качествами:

  1. Легко подключаемый.

  2. Легко настраиваемый как функционально, так и визуально.

  3. Загрузка нескольких файлов.

  4. Прогрессбар (показ процесса загрузки).

  5. Кроссбраузерность (работоспособность во всех современных браузерах).

Для меня таким инструментом стал FancyUpload - Swiff meets Ajax (v3.0).

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

1. Вот так он, собственно выглядит на моём сайте… Жмём на ссылку для выбора файлов, подлежащих загрузке.

ajax - upload файлов

ajax - upload файлов

2. Выбираем файлы , можно даже несколько одновременно. Жмем открыть.

ajax - upload файлов

ajax - upload файлов

3. Появляются превьюшки с названиями и размером файлов, которые загружаем и это при том, что мы их ещё не загрузили! Жмем загрузить фотографии.

ajax - upload файлов

ajax - upload файлов

4. Начинается загрузка файлов. Два прогрессбара. Первый показывает общий прогресс, второй - файла, который грузится в данный момент.

ajax - upload файлов

ajax - upload файлов

5. Если Вы внимательно разглядывали картинки, то, наверное заметили ссылку очистить список. В версии, которую я “затачивал” под себя она без перезагрузки страницы удаляет список загрузок и соответствующие ему файлы на сервере.

В моей реализации при загрузке создаются три копии картинки :

  1. Иконка (20px*Xpх)
  2. Миниатюра (150px*Xpx)
  3. Большое изображение(600px*Xpx)

Ресайзятся пропорционально. Исходное изображение тут же удаляется. Этим я “предохраняю” сервер от неоправданно больших и “тяжелых” изображений.

На миниатюру и большое избражение вставляется водяной знак.

С помощью FancyUpload’а можно загружать файлы размером до 2Гб!

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

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

1. imageresize - ресайзит изображение пропорционально, наносит водяной знак на получившееся изображение.

// $outfile -  путь к файлу, который получится после преобразования
// $neww - ширина в px, к которой преобразуем
// $infile - путь к файлу, который преобразуем
// $quality - качество изображения в %
// вызов функции выглядит примерно так:
//
// imageresize("images/out_image.jpg",150,"uploads/image.jpg",100);
//
function imageresize($outfile,$neww,$infile,$quality) {

$im=imagecreatefromjpeg($infile);

$newh=$neww*imagesy($im)/imagesx($im);

$im1=imagecreatetruecolor($neww,$newh);
imagecopyresampled($im1,$im,0,0,0,0,$neww,$newh,imagesx($im),imagesy($im));
if($neww>=140)//добавляем водяной знак на изображения больше среднего размера
{              //путь к изображению с водяным знаком
$image_logo = "../../../images/logo.png";
$im_logo = imagecreatefrompng($image_logo);
imagecopy($im1, $im_logo, 0, 0, 0, 0, 150, 25);
}
imagejpeg($im1,$outfile,$quality);
imagedestroy($im);
imagedestroy($im1);
}
2. Удаление файла

//удаляем исходный файл
if(@file_exists('upload/file.jpg'))
{
unlink('upload/file.jpg');
}

По просьбам читателей выкладываю исходники своего варианта этого загрузчика: скачать ajax-uploader.

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Похожие статьи

Если Вам понравилась эта статья,
подпишитесь на RSS !

Метки: , , ,

67 Комментариев к “AJAX - upload файлов.”

  1. Женя написал:

    Привет! Подскажи, если не сложно, как ты сделал что бы у тебя после загрузки файла сразу де показывались Иконка (20px*Xpх). Очень поможешь. Заранее спасибо.

  2. Yura goldblog написал:

    В файле build.html
    В действие при удачной загрузке файлов
    onFileSuccess: function(file, response) {
    var json = new Hash(JSON.decode(response, true) || {});
    if (json.get(’status’) == ‘1′) {
    file.element.addClass(’file-success’);
    file.element.setStyle(’background-image’,'url(’+json.get(’min’)+’)');

    где json.get(’min’) - возваращенный в формате json путь к иконке на вашем сервере.
    Для создания иконки воспользуйтесь функцией imageresize (см. в посте)

  3. Женя написал:

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

  4. w03zd8rc написал:

    А исходники своей переделки выложить можеш? а то на том сайте выложены глючные версии (по крайней мере их демо глючат у меня)

  5. Yura goldblog написал:

    Могу, добавил в конец статьи.

  6. Den написал:

    А как сделать, чтобы после загрузки вместо стандартной картинки “file.png” появлялась миниатюра фотографии!

  7. Yura goldblog написал:

    В конце статьи пример моей переделки, там реализовано появление миниатюры фотографии.

  8. Ostin написал:

    Когда переношу build.html и изменяю в нем пути к скриптам на соответствующие, скрипты все ровно не загружаются.. они загружаются только в корневой папке загрузчика. Подскажите, почему так? Пути меняю все, проверял несколько раз, пути 100% правильные.

  9. Yura goldblog написал:

    На вопрос смогу ответить чуть попозже, сейчас времени катострафически не хватает. Единственное что могу посоветовать, как я делал у себя. Я тупо там, где мне нужен загрузчик, инклудил ( include(’путь к build.html’);) файлик build.html, предварительно очистив его от лишних в таком случае тэгов , и прочей лабуды.

  10. Ostin написал:

    Ну пути к скриптам все-равно в build-e менять пришлось, но теперь вроде работает, спасибо!

  11. Kim написал:

    Скажите пожалуйста, что пишется в функции unlink для удаления файлов?
    И где меняется путь к джейсону для миниатюрок?

  12. Yura goldblog написал:

    1. В unlink пишем путь к загруженному файлу - оригиналу на Вашем сервере.
    2. Вопрос про “джейсона” не совсем понятен, если ещё необходима помощь, опишите проблему поподробнее.

  13. Ostin написал:

    После загрузки фото, не отображается миниатюра фотографии, как это исправить?

  14. Антон Саблев написал:

    Может я конечно не внимательный, но не удобней ли загружать файлы через file zilla ??? А не выдумать велосипед по новой?
    С Ув. Антон Саблев

  15. Ostin написал:

    Ну когда мне кто-нибудь ответит? я использую исходник из статьи! У меня ни миниатюра, ни картинка, которая во время загрузки место фотоки не отображаются!

  16. Владимир написал:

    to Антоха: filezilla для того чтобы ты загружал сам файлы на свой сайт, а пользователи твоего сайта каким макаром это сделают? или ты через фтп всем будешь предлагать это делать?)))

  17. Алексей написал:

    Подскажите, что нужно поменять в фалах, кроме путей к скриптам? файлы выюираються, прогрес бар джоходит до 100% а потом говорит что фалй не загружен ибо таймаут…

  18. Yura goldblog написал:

    Алексей, какой размер файлов загружаете?
    У меня была проблема, не загружались файлы более 100кб на некоторых системах и браузерах, причем я так и не понял почему, проблема определенно была на пользовательской стороне. Я увеличил в настройках сервера apache значения:

    php_value max_execution_time 600
    php_value max_input_time 600

    600 - это время работы в секундах, стали загружаться файлы большего размера. Если Вам будет мало 600, попробуйте увеличить ещё, но не увлекайтесь сильно, чревато зависшими процессами на сервере и следовательно перегрузками.

  19. Алексей написал:

    Да файлы не превышают 100кб…

    мне так кажеться что я что то не то наворотил с кодом… а в каком месте не пойму…

    Нужно было что то менять кроме путей к скрипатм?

  20. Владимир написал:

    После загрузки картинки выдает:
    (Warning: imagecreatefromjpeg(/uploads/20100311012647994.jpg) [function.imagecreatefromjpeg]: failed to open stream: No such file or directory in …/uploader/server/script.php on line 165)
    Подскажите, в чем может быть проблема, ато я в js не рублю))

  21. Yura goldblog написал:

    JS не причем, проблема в Вашей серверной части, а точнее в скрипте “…/uploader/server/script.php” на “165″ строчке. Ошибка в функции “imagecreatefromjpeg” - она участвует в создании миниатюр, ресайза и наложения водяного знака. “No such file or directory” - возможно неверно указаны пути к каким-то файлам, например к картинке водяного знака или к папке, куда сохраняются превьюшки или к загруженной картинке, из которой ваяем превьюшки.

  22. Владимир написал:

    Действительно. Порылся и исправил, теперь все работает. Только мне больше подошел attach a file. Там по ходу только build.php меняется и одна js библиотека, все остальные файлы подходят.
    Спасибо за подсказку такого интересного скрипта и особенно за его доработку))

  23. Yura goldblog написал:

    Пожалуйста.

  24. Yura goldblog написал:

    Алексей, поидее нет, ошибка с таймаутом-это именно серверная часть, Вы пробовали увеличить параметры, которые я описывал выше в комментариях?

  25. Владимир написал:

    Подскажите, как поставить ограничение на количество добавляемых файлов?

  26. Александр написал:

    Помогите, пожалуйста, сохранить пути к фоткам в mysql, я пробывал в script.php через mysql_query(insert) чето ниче не получилось(((

  27. Yura goldblog написал:

    Владимир, в файле “source/Swiff.Uploader.js” - параметр “fileListMax: 10″, 10 - максимальное количество файлов.

  28. Yura goldblog написал:

    Александр, script.php - работает асинхронно, на AJAX, в нем необходимо заново подключиться к БД, а потом уже делать insert.

  29. Livon написал:

    хочется ругаться матом - загружал вашу сборку и пытался запустить с офф. сайта. Не хочет запускаться ни в какую.
    У меня к вам вопрос - вы сами пробовали скачать и установить то, что выложили? Зачем выкладывать нерабочую версию? build.html не оформлен как html вообще, куча ссылок на файлы, которых просто нет в сборке.
    С офф. сайта почему-то очень конфликтует с либой jquery.

    потратил полтора часа жизни.

  30. Yura goldblog написал:

    Livon, не стоит ругаться, я же написал, что выкладываю исходники своего варианта, и не говорил, что это плагин или чето-такое, хотите, что бы у вас заработало как и уменя, по готовому примеру сделать не составит труда, а если хотите всё готовенькое, то вы ошиблись при наборе url. На множество вопросов ответил в комментах, если возникнут проблемы при адаптации скриптов под Ваш сайт, пишите, помогу чем смогу.

    Конфликтует с jQuery? Конечно, это ж mootools.
    После подколюченя jQuery, добавьте следующий JS код: jQuery.noConflict();
    И инициализируйте jQuery объекты не через “$.()”, a через “jQuery.()”

  31. Livon написал:

    С mootools ранее не работал, спасибо за объяснения.
    Извините, если был черезчур резок - ночь, нервы от кучи неработающего кода, больной зуб )).
    Я и не требовал, чтобы у меня моментально все заработало, но даже приложив усилия я так и не смог запустить. Вашу сборку можно улучшить приложив минимальные усилия, просто чтобы другие не мучились:
    1. Добавить в build.html заголовки, что это вообще html и прописать кодировку
    2. Починить ссылки на ресурсы - например вместо
    ../../modules/add/source/……
    сразу написать
    source/…..
    3. Проверить, что в сборке хватает ресурсов. Например, clear_list.php

    Я это к чему пишу - если вы делитесь с общественностью своей работой - сделайте это максимально качественно.
    Спасибо

  32. Yura goldblog написал:

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

  33. Сергей написал:

    А вот меня интересует, как передать в скрипт загрузки динамически созданный путь к папке? Т.е. я создаю папку в которую мне нужно грузить фотки, а вот передать скрипту не получается… путь пустой и файлы падают рядом со скриптом

  34. Андрей написал:

    Огромнейшее спасибо за полезную информацию! Сэкономил уйму времени. Все получилось и работает.

  35. Samuil написал:

    AJAX рулит, спасибо, хотя в исходниках пришлось поковыряться.

  36. Валерий написал:

    поставил, работает, автору респект!!!

  37. Валерий написал:

    Привет,

    Как сделать чтобы imageresize для вертикальных фото и для горизонтальных различал высоту или ширину делать 1000 в моем примере?

    imageresize($imagge_out,1000,$imagge,75);

  38. Yura goldblog написал:

    Валерий, в функции imageresize сравните высоту и ширину исходного изображения:
    if(imagesy($im)>imagesx($im)) //если ширина больше высоты
    {
    $newh=$neww*imagesy($im)/imagesx($im);
    }
    else //если высота больше ширины
    { $newh = $neww;
    $neww=$newh*imagesx($im)/imagesy($im);
    }

    Примерно так.

  39. Валерий написал:

    Yura goldblog, спасибо, заработало.

  40. Yura goldblog написал:

    Всегда рад помочь :)

  41. Андрей написал:

    Не работает лимит максимального количества файлов
    Ставлю “fileListMax: 5,”
    в файле Swiff.Uploader.js

    Все работает кроме этого. Может подскажет кто?

  42. Yura goldblog написал:

    Андрей, сам было парился с лимитом, потом благополучно забил :) Мне кажется необходимо залезть еще глубже в исходники и где-то там уже найти корень этого зла )

  43. Павел написал:

    День добрый ! Вопрос такой. Скачал пример вашего скрипта - воткнул к себе на сайт - и не работает совершенно (( Начиная от того что не отображает рисунки прогресс-баров и не позволяет выбрать несколько фалов (только один) и заканчивая, тем что при нажатии ссылки Загрузить фотографии - вообще ничего не происходит.
    Что надо поправить в вашем коде ? FancyUpload - Swiff meets Ajax (v3.0) - качнул изх пример - он работает (правда выдает только название картинок и их размер) а сами фотки не грузит на сайт. ((
    Буду признателен совету

  44. Владис написал:

    Ошибка при загрузке: Сервер вернул HTTP-Status #404
    Юра в чём может быть прабла?

  45. lol написал:

    Запарился исправлять пути, нафиг он нужен о_О. Легче уже самому аналог написать, чем исправлять данный скрипт.

  46. lobio написал:

    Почему у меня ошибка такая выходит?
    An error occured:
    Warning: md5_file(X:\tmp\php28B.tmp) [function.md5-file]: failed to open stream: No such file or directory in X:\home\localhost\www\uploader\server\script.php on line 123
    {”status”:”1″,”name”:”448847-0.jpg”,”hash”:false}

  47. Yura goldblog написал:

    lobio, что у Вас в 123 строчке скрипта \uploader\server\script.php?

  48. lobio написал:

    Yura goldblog, в 123 строке: $return['hash'] = md5_file($_FILES['Filedata']['tmp_name']);
    Я не могу получить майм тип изображения и размеры в пикселях.
    И еще один вопрос. Я хочу прикрутить FancyUpload к компоненту в Joomla, но самой формы загрузки нет. Эффект такой же, как если бы мы открыли build.html двойным щелчком, а не через localhost. Спасибо.

  49. Александр написал:

    Как настоящий чайник в ajax, но занимающийся этим по необходимости - попытался разобраться в этом всём.

    Почти получилось. Остались вопросы, где найти clear_list.php и lang.js ?

    Про clear_list.php не совсем понял, чем он занимается.
    Lang.js работает странно. Во всяком случае у меня без него всё на русском. Как только подключаю - всё сразу на английском.

  50. rammstein написал:

    спасибо, поставил, настроил, немного изменил…
    всё работает!
    но вот закаченые картинки не появляются :(
    в аяксе я не силён…
    можно как-то сделать чтобы после закачки всех картинок редиректилось на другую страницу? типа со списком закаченых
    ЗЫ. с “Single File Button” не работал? что-то не могу допетрить как передать в script.php переменную
    в этом нашел:
    data: {’us’ : ‘username; ?>’ , ‘imgauthor’ : document.getElementById(’imgauthor’).value },

  51. Firestarter написал:

    Swiff.Uploader.js

    if (options.fileListMax && this.base.fileList.length >= options.fileListMax) {

    замняйте на

    if (this.base.fileList.length >= options.fileListMax) {

    и будут Вам ограничения

  52. EnsteyN написал:

    Здраствуйте!! могли бы вы отправить уже работающую версию скрипта на ensteyn@inbox.ru

    никак не могу заставить его работать. буду очень благодарен

  53. levantuev написал:

    Хочу вставить в script.php код:
    echo ”;
    Все нормально отрабатывается, но вот беда, при выполнение скрипта выдается текст: Произошла ошибка:
    {”status”:”1″,”name”:”07 - WF.jpg”,”min”:”..\/uploads\/min-20101226182337918.jpg”,”photo_name”:”20101226182337918.jpg”}

    Как её убрать? или я не верно вставляю экхо?

  54. kossapa написал:

    Преджде всего спасибо за решение! при небольших изменениях работает.
    Но меня мучает другой вопрос. Так и не смог наковырять как заставить его передавать дополнительные пост параметры с формы. Например, если пользватель укажет до каких размеров должна уменьшиться картинка, либо добавить галочку накладывать или не накладывать защиту (лого) на изображение, ну и еще по мелочи?
    Можно конечно дописывать все в гет параметры, но это как-то некрасиво.
    Жду ответа, за ранее спасибо.

  55. Григорий написал:

    Здравствуйте, большое спасибо за скрипт, после замены путей - всё отлично работает)) Но есть пара вопросов:
    1. Если у меня imageresize($imagge_out,1024,$imagge,100); , а картинка по ширине менее 1024, то как отменить изменение размера? Иначе маленькая картинка шириной в 200, увеличивается до 1024 …
    2. Ранее уже задавали.. Как можно рядом с загрузкой файлов вывести окно с ссылками на них, бб кодом, хтмл и так далее?

  56. Саша написал:

    Юра напишите ссылку на ваш сайт ?

  57. Djutan написал:

    Владелец поржал и выложил архив полностью с перепутанной системой путей :) Некоторых нужны файлов в архивах нет. Вот такая она скрытая жаба гг

  58. Александр написал:

    Скрипт понравился, но требует доработки напильником)) убрал вкрапления jquery из-за конфликта с mootols. работает отлично)

  59. Костя написал:

    сккинь пожалуйста рабочую версию на почту, мне главное чтобы работала процедура удаления файлов.. damarkmail@gmail.com

  60. Георгий написал:

    Почему скачанный пример не работает??? залил на сервер и запустил build.html. ничего никуда не грузится, при нажатии на ссылки ничего не происходит.

  61. pautinaweb написал:

    А кто нибуть подскажет как передать из формы дополнительную информацию методом post не получается.
    Хочу загрузить имена фото в базу и привязать их к определенным id

  62. krock написал:

    Неплохо, буду разбираться.

  63. Креатив написал:

    Автор говорит о возможности загружать файлы до 2 Гб. Как он это сделал? У меня максимум 60 Мб. Или надо серверные настройки менять?

  64. Александр написал:

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

  65. Алексей написал:

    У меня к вам вопрос относительно водяного знака, сделал свой logo.png но ничего не добавляется на загруженные картинки. В чем может быть загвоздка?

  66. Вася написал:

    Нихуя твой скрипт неработает ФУФЛО !

  67. mba courses in india написал:

    mba courses in india

    Great day to all!!! I extremely loved this content. All is well. I’m attempting to infuse it into the site I make, yet one issue just murders. For what reason do I have hieroglyphics rather than Russian letters? How to beat this business? I would truly value your assistance

Оставить комментарий

Я не робот.