Установка jQuery. AJAX загрузка файлов на сервер с помощью jQuery Jquery загрузить файл на сервер

1.х и 3.х версий. Для загрузки доступны сжатые и несжатые копии скриптов. В несжатом формате лучше использовать, если вы часто занимаетесь разработкой jQuery плагинов и отладкой их в браузере. А сжатый формат позволяет улучшить производительность работы скрипта.

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

Для локальной загрузки файлов библиотеки , нажмите правой кнопкой мыши по ссылке и в контекстном меню нажмите "Сохранить объект как.." .

jQuery Migrate 1.х - разработчики постарались максимально грамотно подойдет к тем разработчикам, которые используют старые версии плагинов. Настоятельно рекомендуем использовать линейку библиотеки jQuery Migrate 1.х, если на вашем сайте используются более старые плагины, которые не были обновлены или не поддерживают современных версий библиотеки. Скачать библиотеку jQuery 1.x можно по следующим ссылкам:

Версии jQuery 3.x имеет абсолютно тот же интерфейс, что и 1.х и является продолжением версий 2.х, но не поддерживается Internet Explorer 6, 7 и содержит в себе множество новых веб-технологий, которые делают работы jQuery оптимизированной. Также разработчики jQuery рекомендуют использовать с IE8 линейку версий 1.x. Скачать и ознакомиться с jquery min js 3.x можно по ссылкам ниже:

Также обращайте внимания на конфликты скриптов, если вдруг у вас уже подключена какая-нибудь версия jQuery .

Да, да! Всё верно! Буквально несколько часов назад состоялся релиз новой версии одной из самых любимых библиотек - jQuery 2.0.

Как и было обещано, из данной версии выкинули код, отвечающий за поддержку IE 6, 7, 8. Благодаря этому, библиотека стала намного легче и быстрее. Однако беспокоится об этом сильно не стоит, т.к. развитие и поддержка ветки 1.x будет продолжаться ещё несколько лет. Это значит, что мы ещё долго сможем пользоваться актуальной версией 1.9, и готовящейся к релизу 1.10.

Устранение поддержки IE 6/7/8 - это также может касаться и IE 9/10, если в них активирована функция «Представление совместимости».

Уменьшение размера библиотеки - размер библиотеки сократился на 12%.

Появилась возможность настройки библиотеки под себя - теперь у нас появилась возможность выбирать, какие из 12 модулей библиотеки нам нужны (ajax, ajax/xhr, ajax/script, ajax/jsonp, css, deprecated, dimensions, effects, event-alias, offset, wrap, sizzle), чтобы ещё больше уменьшить размер файла.

Схожесть с API версии 1.9 - jQuery 2.0 API совместим с версией 1.9. Это означает, что все изменения версии 1.9 плавно перешли и в новую версию. Если вы ещё не перешли на jQuery 1.9, то воспользуйтесь плагином миграции .

Новую версию библиотеки можно скачать с официального jQuery CDN:

http://code.jquery.com/jquery-2.0.0.min.js (сжатая версия)

http://code.jquery.com/jquery-2.0.0.js (для тестирования)

Вскоре данные файлы будут доступны на CDN от Google и Microsoft. Для гарантии функционала, базирующегося на jQuery, указывайте конкретную версию библиотеки, которую хотите использовать.

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

jQuery 2.0 направлен на разработку под современные технологии. jQuery 1.x будет продолжать развиваться ещё пару лет, поддерживая старые браузеры. Если же у вас есть необходимость подключать обе библиотеки, в зависимости от функционала, то в помощь вам специальные проверки:

С выходом новой версии, расширилась среда применения jQuery:

• Плагины Google Chrome
• Приложения и расширения для Mozilla
• Приложения Firefox OS
• Приложения Chrome OS
• Приложения Windows 8
• Приложения Blackberry 10
• Приложения PhoneGap/Cordova
• Класс Apple UIWebView
• Microsoft WebBrowser
• Расширение для Node.js

Ну что же, будем следить за новостями jQuery 2.0 и в дальнейшем публиковать уроки и на эту тему.

20.05.2013 Ромчик

Доброго времени суток. Мы продолжаем изучать библиотеку JavaScript — jQuery. В прошлой статье мы познакомились с достоинствами данной библиотеки и ее недостатками. А сегодня мы уже начнем изучение jQuery и первым делом, что мы сделаем - это подключим данную библиотеку к нашему проекту. А рассмотрим мы два способа подключия jQuery и остановимся на их плюсах и минусах. Так, что приступим.

Первое, что мы сделаем подготовим наш проект. Сразу уточню я не буду подробно останавливаться на верстке, все внимание будет сосредоточено на jQuery.

Создадим виртуальный хост, например, jquery. В нем будет основной файл index.php, директория js — со скриптами JavaScript, директория img - директория с картинками и директория css - директория с файлами стилей CSS.

В index.php добавим следующий код:

Изучаем jQuery Header Content Sidebar Footer

В файл style.css, который находится в директории css, поместим следующий код:

Html, body{ padding:0; margin:0; height:100%; position:relative; } /* Header */ #header { background-color: red; height: 100px; width: 900px; margin: 0 auto; } /* Content */ #wrapper{ background:#CCC; min-height:100%; margin: 0 auto; width: 900px; } #content{ float: left; width: 700px; } #clear{ clear: both; height: 50px; } /* Footer */ #footer{ background:#36F; height:50px; margin: 0 auto; width: 900px; margin-top:-50px; position:relative; }

Код для этих файлов я пояснять не буду. Просто давайте проверим, что у нас получилось. Переходим, в моем случае я набираю в браузере jquery и попадаю на локальный сервер apache, на виртуальный хост jquery и вижу:

Отлично проект к подключению jQuery готов. Теперь мы можем приступить к непосредственному подключению jQuery. JQuery можно подключить двумя способами: первый скачать библиотеку jQuery и разместить ее в нашем проекте и второй способ подключить jQuery библиотеку через CDN. И дальше мы рассмотрим оба способа.

Для подключения библиотеки этим способом необходимо скачать ее с официального сайта. Для этого переходим на официальный сайт :

И жмем «Download jQuery»

Переходим на следующую страницу, где выбираем версию jQuery библиотеки. На момент написания можно было скачать две версии: jQuery 1.9.1 (устраевшая, но поддерживающая браузеры IE6/7/8) и jQuery 2.0.0 (последняя версия, которая уже не поддерживает браузеры IE6/7/8)

Если Вы качаете библиотеку для production, т. е. для готового проекта, то выбирайте сжатую версию Download the compressed, production jQuery… Если же качаете библиотеку для development, т. е. для разрабатываемого проекта, то качайте не сжатую библиотеку Download the uncompressed, development jQuery… Почему? Для рабочего проетак лучше сжатая версия, т. к. весит меньше. А для development - просто иногда хочется заглянуть в код, любопытство:)

Я скачал не сжатую версию jQuery 1.9.1 и назвал файл с этой библиотекой jquery.js Теперь помещаем этот файл в папку js нашего проекта.

Открываем файл index.php и между тегами и помещаем следующий код:

Т.о. мы подключили библиотек jQuery к нашему проекту. Давайте проверим.

Для этого создадим в директории js еще один файл script.js и поместим в него следующий код:

$(function(){ alert("jQuery работает"); });

Данный код ничего особенного не делает, просто выводит сообщение «jQuery работает». Проверим, открываем через браузер нашу страницу и видим:

Как видим jQuery мы подключили и она работает.

Плюсы данного способа Вы не зависите от других сервисов. Минус - пользователь постоянно загружает библиотеку jQuery (а это влияет на загрузку самого сайта).

Что такое CDN? CDN (Content Delivery Network) - сеть доставки контента. И так, при использовании CDN само ядро jQuery уже храниться на стороне. Это может быть Google, Microsoft, Yandex или сам jQuery. Выбирать Вам. Я использую CDN от Google (самый стабильный, может конечно я не прав). Хотя следует отметить и CDN от Yandex они выкладывают и плагины за что им огромное спасибо.

Для того, чтобы подключить jQuery через CDN от Google. Откройте файл index.php и в тегах строку:

замените на:

Проверяем.

Если же Вы хотите использовать CDN от Yandex, то замените на:

Проверяем и видим аналогичный результат.

Преимущество данного метода заключается в скорости загрузки Вашего сайта, а это происходит из-за тог, что если пользователь заходил на какой-либо сайт, который использует тот же самый CDN и ту же самую библиотеку (имеется ввиду версию) jQuery, то она у него уже закэширована и не требует повторной загрузки.

Вот в принципе и все. Мы с Вами рассмотрели два способа подключения библиотеки jQuery к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.

Мы пробежались по нескольким основным методам для получения данных и их дальнейшей передаче AJAX-запросом. Теперь пришло время поговорить о том, как же можно загружать файлы с помощью AJAX . Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс. Но оглядываться назад не будем, посему шагаем в ногу со временем.

Рассмотрим, на мой взгляд, один из самых удобных способов для работы с файлами (и не только) - объект FormData . Пусть будет такая простенькая форма, для загрузки аватара пользователя:

HTML (файл index.html )

Ф.И.О:
Аватар:

Перейдем к JS-части. С полем "Ф.И.О" сложностей не будет и его используем только для наглядности того, что вместе с файлом, мы можем отправлять любые другие данные.

jQuery (файл script.js )

$(function(){ $("#my_form").on("submit", function(e){ e.preventDefault(); var $that = $(this), formData = new FormData($that.get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму (*) $.ajax({ url: $that.attr("action"), type: $that.attr("method"), contentType: false, // важно - убираем форматирование данных по умолчанию processData: false, // важно - убираем преобразование строк по умолчанию data: formData, dataType: "json", success: function(json){ if(json){ $that.replaceWith(json); } } }); }); });

(*)Обратите внимание на то, что передаем форму не объектом jQuery, а DOM-элемент

PHP-обработчик (файл handler.php )