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

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое - что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress , то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели...

AJAX Загрузка файлов: общий пример

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега ).

Таким образом, у нас есть HTML код с file полем и кнопкой «Загрузить файлы».

Загрузить файлы

Шаг 1. Данные из поля file

Первым шагом, нужно получить данные загружаемых файлов.

При клике на file-поле, появляется окно выбора файлов, после выбора, данные о них сохраняются в input поле, а нам нужно их от туда «забрать». Для этого повесим на событие change JS функцию, которая будет сохранять имеющиеся данные file-поля в JS переменную files:

Var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; });

Шаг 2. Создаем AJAX запрос (по клику)

Данные файлов у нас есть, теперь их нужно отправить через AJAX. Вешаем это событие на клик по кнопке «Загрузить файлы».

В момент клика создаем новый объект new formData() и добавляем в него данные из переменной files . С помощью formData() мы добьемся того, что отправляемые данные будут выглядеть, как если бы мы просто сабмитили форму в браузере.

Чтобы такой запрос состоялся, в jQuery нужно указать дополнительные AJAX параметры, поэтому привычная функция $.post() не подходит и мы используем более гибкий аналог: $.ajax() .

Два важных дополнительных параметра нужно установить в false:

ProcessData Отключает обработку передаваемых данных. По умолчанию, например, для GET запросов jQuery собирает данные в строку запроса и добавляет эту строку в конец URL. Для POST данных делает другие преобразования. Нам любые изменения исходных данных будут мешать, поэтому отключаем эту опцию... contentType Отключает установку заголовка типа запроса. Дефолтная установка jQuery равна "application/x-www-form-urlencoded . Такой заголовок не предусматривает отправку файлов. Если установить этот параметр в "multipart/form-data" , PHP все равно не сможет распознать передаваемые данные и выведет предупреждение «Missing boundary in multipart/form-data»... В общем, проще всего отключить эту опция, тогда все работает! // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим объект данных формы var data = new FormData(); // заполняем объект данных файлами в подходящем для отправки формате $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную для идентификации запроса data.append("my_file_upload", 1); // AJAX запрос $.ajax({ url: "./submit.php", type: "POST", // важно! data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК - файлы загружены if(typeof respond.error === "undefined"){ // выведем пути загруженных файлов в блок ".ajax-reply" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val){ html += val +"
"; }) $(".ajax-reply").html(html); } // ошибка else { console.log("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ console.log("ОШИБКА AJAX запроса: " + status, jqXHR); } }); });

Шаг 3. Обрабатываем запрос: загружаем файлы на сервер

Теперь последний шаг: нужно обработать отправленный запрос.

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

Создадим файл submit.php с таким кодом (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

jQuery(document).ready(function($){ // ссылка на файл AJAX обработчик var ajaxurl = ""; var nonce = ""; var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; }); // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим данные файлов в подходящем для отправки формате var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную идентификатор запроса data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX запрос $reply.text("Загружаю..."); $.ajax({ url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК if(respond.success){ $.each(respond.data, function(key, val){ $reply.append(""); }); } // error else { $reply.text("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ $reply.text("ОШИБКА AJAX запроса: " + status); } }); }); })

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

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

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

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

Основные изменения jQuery 2.0

Устранение поддержки 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 и в дальнейшем публиковать уроки и на эту тему.

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

Подключение библиотеки jquery min js

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

или

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

jQuery Migrate 1.x

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

jQuery 3.x

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

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

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. И дальше мы рассмотрим оба способа.

Первый способ - подключение локальной библиотеки jQuery

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

И жмем «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 для подключения 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 к проекту. Какой из способ использовать выбирать Вам. А на этом пока все.