Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

FancyUpload - массовый загрузчик файлов на сервер

Здравствуйте, в этом уроке я бы хотел рассказать о скрипте FancyUpload, который поможет осуществить массовую загрузку изображений на сайт. Данный скрипт довольно удобен и прост в использовании. Загрузка осуществляется посредствами AJAX, без перезагрузки страницы, при этом вы будите видеть анимированный прогресс бар и информацию о загружаемом изображении. Так же с помощью него можно загружать и другие файлы.

Пример

Данный скрипт использует библиотеку mootools и flash файл, с помощью которого осуществляется вывод информации и красивая анимация при загрузке, а так же нам понадобятся другие javascript файлы. Скачайте исходные файлы и откройте файл index.html. В нем в самом начале прописаны все нужные скрипты:

<script type="text/javascript" src="source/mootools.js"></script>
<script
type="text/javascript" src="source/Swiff.Uploader.js"></script>
<script
type="text/javascript" src="source/Fx.ProgressBar.js"></script>
<script
type="text/javascript" src="source/Lang.js"></script>
<script
type="text/javascript" src="source/FancyUpload2.js"></script>

Затем идет довольно большой кусок javascript кода, который я здесь приводить не буду, а объясню основные его параметры:

path: 'source/Swiff.Uploader.swf'

Здесь прописывается путь до flash файла.

typeFilter: {
    ' Изображения (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
}

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

'Документы (*.doc, *.docx)': '*.doc; *.docx'

Далее найдите такой код:

if (json.get('status') == '1') {
      file.element.addClass('file-success');
      file.info.set('html', '<strong>Информация о файле:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px<br>Новое имя файла: ' + json.get('new'));
}
else {
      file.element.addClass('file-failed');
      file.info.set('html', '<strong>Ошибка:</strong> ' + json.get('error'));
}

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

<link rel="stylesheet" type="text/css" href="source/styles.css">

После всего этого идет сама форма загрузки, в которой имеются три ссылки, по нажатию на которые происходят соответствующие им действия:

<a href="#" id="demo-browse">Выбрать файлы</a> |
<a href="#" id="demo-clear">Очистить список</a> |
<a href="#" id="demo-upload">Начать загрузку</a>

В ней же содержатся картинки прогресс баров и список <ul id="demo-list"></ul>, в котором будут отображаться добавляемые файлы. С этой страницей разобрались, теперь откройте файл script.php в папке server. В нем я везде добавил комментарии, которые помогут вам разобраться в коде. В нем происходят различные проверки, ведение log файла, ну и сама загрузка файла. Все данные из этого файла возвращаются независимо от того прошло все удачно или нет в виде массива $return. В него вы можете добавить свои данные, например, путь до загружаемого изображения ($return['img']) и потом использовать его для вывода на экран. При этом нужно прописать вывод этих данные в файле index.html (в таком виде json.get('img')). Еще что можно отредактировать так это файл FancyUpload2.js в папке source, содержащий различные фразы и другую служебную информацию о файлах (массив phrases). При желании их значения можно изменить на свои. Ну вот и все, теперь загрузка будет довольно удобной и простой.

Автор: Евгений Бочкарев Урок добавлен: 5 Февраля 2011 13:28 Просмотров: 23216

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (160)

#161 Евгений 15-07-2014 в 10:09
Стрэк, скорее всего неправильно что то пишите, и возникает ошибка. Покажите этот кусок кода.
#162 Евгений 15-07-2014 в 10:14
Capoeirista, чтобы переименовать файл, нужно передать переменную с id пользователя таким образом:

data: {'user_id' : 'user_id'},

В обработчике (script.php) эта переменная будет доступна как $_POST['user_id']. И дальше уже переименовать файл в нужном формате.

Не рекомендую сохранять имена файлов в кириллице, с этим могут возникнуть проблемы на некоторых хостингах или при переносе. Лучше сразу файл переименовывать при загрузке.
#163 Capoeirista 15-07-2014 в 20:20
Евгений, по-первому вопросу уже решил. Когда я добавил дополнительные расширения, то забыл, что в JS внутри функции нужно в конце запятую ставить.

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

А как нужно сделать с переименованием ...? Получается если у меня есть форма и к ней обработчик, то нужно склеить мой и этот или как?
#164 Евгений 16-07-2014 в 12:32
Даже не знаю почему названия файлов коверкаются. Я всегда стараюсь переименовывать файлы в латиницу и проблем таких не возникает.
В исходниках в моем примере (script.php) строка 113 отвечает за генерацию нового имени файла. У меня сделана текущая дата и рандомное число. Это строку можно поменять как угодно и подставит в нее id пользователя.
#165 Capoeirista 16-07-2014 в 13:25
Евгений, вот потому и спросил, что в этом скрипте нормально кириллица обрабатывается, а в оригинальном новом нет.
Благодарю за ответ.
#166 Aleksckjy 09-12-2014 в 04:46
СПАСИБО за скрипт! Очень пригодился.
==================================.
ВОПРОС: на странице реализован слайдер, ниже показан фрагмент...
-----------------------------------------------------------------------.
<div id="wrapper">
<div id="carousel">
<img src="img/e1.jpg" alt="e1" width="700" height="350" border="0" />
<img src="img/e2.jpg" alt="e2" width="700" height="350" border="0" />
</div>
<div id="thumbs">
<div id="thumbscarousel">
<img src="img/small/e01.jpg" alt="e1" width="150" height="75" border="0" />
<img src="img/small/e02.jpg" alt="e2" width="150" height="75" border="0" />
</div>
</div>
</div>
-----------------------------------------------------------------------.
Подтолкните, пжлста, в каком направлении рыть, чтобы закаченные файлы добавить для отображения в слайдер. Т.е. сформировать на странице строки вида:
<img src="img/e3.jpg" alt="e3" width="700" height="350" border="0" />
и
<img src="img/small/e03.jpg" alt="e3" width="150" height="75" border="0" />
==================================.
#167 Евгений 10-12-2014 в 14:46
Думаю, нужно записывать имена загруженных файлов в базу, а затем в цикле выводить.
#168 Aleksckjy 10-12-2014 в 15:47
#167 Евгений
============....
Не хотелось бы заморачиваться с БД... Попробую сделать через массив.

#169 oldboy 25-01-2016 в 19:39
Красивый скрипт, но у меня не пошёл, видимо конфликт с jquery, и победить я его не смог, хотя в интернете рылся, способы искал, увы...
#170 Allex 21-03-2017 в 21:58
Здрасьте.
Думал, удаление файла - это удаляет его также физически...

Но посмотрел код -
вижу, физическое удаление з папки uploads не реализовано, - думал дописать в FansyUpload2 дописать id=rem-del для ссылки добавлять, или вызывать там же функцию из нового .php или .js, где будет идти удаление...

но поскольку генерируется новое имя - тут уже надо отлавливать новое название, дописывать в какой-то span, считывать... - то это еще сложнее для меня осуществить

(((

Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки