Загрузка файлов без перезагрузки страницы
Давно уже меня терзают этой темой - "Как сделать форму без перезагрузки ", "Как сделать комментарии без перезагрузки ?" и другими подобными вопросами. Тема эта непростая сама по себе, а надо было еще сделать так, чтобы её поняли и усвоили те люди, которые посмотрят урок.
ВИДЕО: Автоматическая подгрузка контента при прокручивании страницы
Сегодня, на многих сайтах мы можем увидеть следующую картину: крупный контент не разбивается по страницам , а подгружается по ходу просмотра. Где-то нужно самим нажать на кнопку, где-то просто дойти до конца страницы . В обоих случаях контент начнёт подгружаться. В этом уроке мы посмотрим, как создать подобный функционал.
Регистрационная форма с прогресс-баром
В этом уроке мы рассмотрим замечательную форму регистрации, выполненную на jQuery и php. Данная форма компактна, имеет прогресс-бар, отправляет и проверяет данные на сервере в фоновом режиме, т.е. без перезагрузки страницы .
Проверка формы "на лету"
В этом уроке мы рассмотрим эффект проверки правильности заполения формы "на лету", т.е. без перезагрузки страницы .
Закладки с использованием только CSS
Идея построения закладок на одном CSS витает в среде веб дизайна уже достаточно давно. Однако среди множества реализаций очень немногие соответствуют тому функционалу, который ожидается от закладок. Обычно, пользователь надеется, что нажав на закладку, он увидит новое содержание без перезагрузки страницы .
5 примеров использования jQuery для AJAX
AJAX – группа технологий, которая используется в веб разработке для создания интерактивных приложений. AJAX позволяет передавать данные с сервера без перезагрузки страницы . Таким образом можно получать очень впечатляющие результаты. А библиотека jQuery существенно облегчает реализацию AJAX с помощью встроенных методов.
Создание древовидных комментариев (10 видеоуроков)
В данном уроке мы подробно рассмотрим, как создать древовидные комментарии для вашего сайта. К тому же, в угоду современным тенденциям, добавление комментария на страницу будет происходить без перезагрузки страницы , с использованием технологии AJAX (асинхронный обмен данными между браузером и сервером).
Загрузка файлов с помощью jQuery и PHP
Сегодня мы представим вам скрипт загрузки файлов на сервер без перезагрузки страницы с помощью PHP и jQuery
Делаем “ленивую” прокрутку на jQuery
В этой статье мы поговорим о другом подходе - “ленивой” прокрутке, также известной под названием “бесконечной прокрутки” и “отказом от пагинации”. С помощью этой техники подгрузка контента производится с помощью AJAX, когда пользователь прокручивает страницу до места, где загруженный контент заканчивается.
Создание динамического голосования на jQuery и PHP
В этом уроке мы будем создавать голосование на PHP и XHTML, применять некоторые эффекты jQuery Ajax, чтоб сымитировать перезагрузку страницы и конечно же добавим немного анимации.
Когда передо мной в очередной раз встала задача об одновременной загрузке нескольких файлов на сервер (без перезагрузки страницы, само собой), я стал блуждать по интернетам в поисках довольно корявого jQuery-плагина, который позволяет имитировать ajax-загрузку файла (того самого плагина, который со скрытым фрэймом: от java- и flash- плагинов сразу было решено отказаться). В процессе поиска я вспомнил, что в грядущем стандарте html 5 возможности по работе с файлами должны быть существенно расширены, и часть этих возможностей доступна уже сейчас. В итоге было решено опробовать их в действии.
Рассматривать возможности File API будем на примере одновременной загрузки нескольких картинок на сервер. В конце статьи приводится готовое решение, оформленное в виде jQuery-плагина.
- Независимость от внешних плагинов
- Возможность контролировать процесс загрузки и отображать информацию о нем (прогрессбар всегда добавляет терпения пользователю)
- Возможность прочитать файл и узнать его размер до начала загрузки (в нашем примере это дает нам возможность отсеять файлы, не содержащие изображений и показывать миниатюры картинок)
- Возможность выбрать сразу несколько файлов через стандартное поле выбора файла
- Возможность использовать интерфейс drag and drop для выбора файлов. Да-да, мы сможем перетаскивать файлы для загрузки прямо с рабочего стола или, например, из проводника!
Для начала разберемся с html-кодом. Нам понадобится дефолтный элемент input, контейнер для перетаскивания файлов и список ul, куда мы будем помещать миниатюрки изображений:
Ничего особенного, кроме того, что для элемента input указан атрибут multiple="true" . Это необходимо для того, чтобы в стандартном диалоге выбора файлов можно было выделять их сразу несколько. Кстати, начиная с Firefox 4, разработчики браузера обещают, что ненавистные многим верстальщикам стандартные поля выбора файла можно будет скрывать, а диалог показывать, вызвав событие click для скрытого элемента.
Теперь перейдем к JavaScript (обратите внимание, что я использовал jQuery для упрощения манипуляций с DOM. Тот, кто по каким-либо причинам захочет отказаться от jQuery, сможет без труда переделать скрипты таким образом, чтобы обойтись без него). Сначала сохраним в переменных ссылки на html-элементы, снявшиеся в главных ролях. Далее определим обработчики событий для стандартного поля выбора файлов и для области, куда можно будет перетаскивать файлы.
И в том и в другом случае в обработчике мы получаем доступ к объекту FileList, который по сути представляет собой массив объектов File. Этот массив передается функции displayFiles(), текст которой приведен ниже.
Объект File содержит метаданные о файле, такие как его имя, размер и тип (в формате MIME, например, image/gif) соответственно в свойствах name, size и type. Для доступа же к содержимому файла существует специальный объект FileReader.
Внутри функции displayFiles() мы проходимся по переданному массиву файлов и сначала отсеиваем те, которые не являются изображениями. Далее для каждого изображения создается элемент списка li, куда помещается пустой пока элемент img (обратите внимание, что в кажом элементе li также создается свойство file, содержащее соответствующий объект). После чего создается экземпляр FileReader и для него определяется обработчик onload, в котором данные передаются прямо в атрибут src созданного ранее элемента img. Метод readAsDataURL() объекта FileReader принимает параметром объект File и запускает чтение данных из него. В результате для всех выбранных через стандартное поле или перетащенных прямо в браузер картинок, мы видим их миниатюры (искусственно уменьшенные до 150 пикселей).
Вот, собственно, и все. С нетерпением ждем утверждения и распространения html 5!
Кое-какие ссылки
-
— работающий пример того, что описывалось выше (плюс еще кое-что) — весь код целиком в архиве — проверка браузеров на соответсвие html 5 (очень наглядно) — площадка для экпериментов с кодом от Google (ее интерфейс будет знаком тем, кто использовал многочисленные API Google)
UPD
Для упрощения использования всего вышеизложенного, был создан JQuery-плагин. При помощи него можно загружать файлы через File API там, где это возможно, и реализовать замену (например, обычную отправку формы) там, где нет. По просьбам трудящихся и соотносясь с замечаниями комментаторов, была добавлена загрузка через объект FormData в браузерах, которые его поддерживают (Chrome, Safari 5+, FF 4+). В самом верху файла с плагином есть описание параметров, методов, а также краткие примеры использования. Более полный пример использования можно увидеть здесь (это изначальный пример из этой статьи, только переделанный на использование плагина, его полный код, включая серверную часть, можно скачать здесь [see UPD2]).
Использованные источники
UPD2
По просьбе пользователя glebovgin плагин был доработан таким образом, чтобы можно было отправлять не только непосредственно объект File, но также Blob-данные (объект Blob). Это может быть полезно, если есть необходимость отправлять на сервер, например, содержимое canvas, ну или просто вручную сгенерированные данные.
В демке (которая переехала немного на другой адрес) был добавлен пример отправки картинки из canvas. На данный момент эта возможность работает в FF, Chrome, IE10.
Исходный код ныне доступен на GitHub. Замечания, предложения, улучшения приветствуются!
Драсте всем.
Спасибо что решили почитать этот пост.
Задача состояла в следующем, в связи с тем что широко известный загрузчик файлов FancyUploader, не всегда, но довольно часто глючит, особенно если использовать прокси, нужно было разработать систему, по которой при загрузке файла показывался прогресс бар… Всё бы ничего, таких систем много, но все либо используют другие флеш загрузчики или иные Апи, что в данном случии являеться негативным результатом разработки.
Но самое интересное оказалось впереди.
Обычно загрузка файлов осуществяеться в то место где и лежит сам сайт (на тот же домен), но у нашей компании это не так. Все картинки и видео лежат на одельном сервере, и соответсвенно хорошо если upload был бы сразу на него, что бы не загружать канал сайта.
code>
function openProgressBar() /* generate random progress-id */
uuid = "";
for (i = 0; i < 32; i++) uuid += Math.floor(Math.random() * 16).toString(16);
>
/* patch the form-action tag to include the progress-id */
document.getElementById(«upload»).action + uuid;
/* call the progress-updater every 1000ms */
interval = window.setInterval( function () < fetch(uuid); >, 1000 );
>
Результат после выполнения в исходном коде будет выглядеть
Т.е. после передачи последнего байта выполняеться action формы в указанный фрейм.
Методом научного и ненаучного тыка были перепробованны масы способов обойти это, но единственным и как выяснилось очень простым оказалось использование якорей в ссылке сайта. Но для кросбраузерности нужно использовать не parent.location.hash, а просто parent.location (иначе работать будеть только в FireFox.)
Для этого файле обработчике не просто формируеться строка с результатом, а формируеться скрипт после которого получаем
После чего осталось считать якорь и обработать его
function fetch(uuid) req = new XMLHttpRequest();
req.open("GET", "/progress", 1);
req.setRequestHeader("X-Progress-ID", uuid);
req.onreadystatechange = function () if (req.readyState == 4) if (req.status == 200) /* poor-man JSON parser */
var upload = eval(req.responseText);
/* change the width if the inner progress-bar */
if (upload.state == 'uploading') bar = document.getElementById('progressbar');
w = 400 * upload.received / upload.size;
bar.style.width = w + 'px';
>else if (upload.state == 'done') //лучше перенести эту стоку сюда, что бы в случии ошибки дальше, запросы прогресса
//не выполнялись
window.clearTimeout(interval);
bar = document.getElementById('progressbar');
bar.style.width = '401px';
Вот и всё господа… В конечном итоге получилась хорошая и достаточно униварсальная ситема (особонне если обработчику пересылать текущий url) для загрузки файлов напрямую на storage сервер с обображением статуса загрузки на сайте (которой находиться не на storage сервере).
Преимущества такой системы — НИКАКОГО ФЛЕША или других аплетов, универсальность решения, и самое главное кросс-доменная загрузка файла без нагрузки на сайт (загрузка на storage напрямую)
Недостакоки — не работает в IE6, нету возможности одновременной загрузки нескольких фалов (как в FancyUploader3)
Дата: 9 марта 2011 53959 35
В прошлых статьях я уже рассказывал Вам о том, как загрузить файлы на сервер. О них можно почитать здесь и здесь. В этой же статье я постараюсь рассказать, как загрузить файл на сервер без перезагрузки страницы.
Обращаю Ваше внимание на фразу «без перезагрузки страницы» - это не с помощью AJAX. Так как Вы должны четко понимать, что с помощью AJAX не возможно загрузить файл на сервер.
О том, как это сделать, я постараюсь рассказать в этой статье!
Итак, для того чтобы организовать такую загрузку файла, нам понадобится: невидимый фрейм, атрибут формы target и javascript.
Итак, давайте создадим страничку upload.html с нашей формой для загрузки файла и невидимый фрейм:
Как видите, это обычная форма для загрузки файла на сервер, только в параметре target указан id скрытого фрейма! Также в коде есть контейнер для вывода результата загрузки.
Теперь, если пользователь выберет файл и нажмет кнопку «Загрузить», файл будет отправлен серверу, а результат будет загружен в скрытый iframe. После того, как данные будут переданы в iframe, необходимо их передать на основную страницу.
Для этого в ответ сервера, необходимо вставить javascript код, который будет вызывать js-функцию, объявленную на основной странице и в качестве параметров, передавать ей результат выполнения запроса.
Для этого добавим в файл upload.html следующий javascript-код:
Функция hideBtn() вызывается в момент отправки файла и служит для информирования пользователя о начале загрузки, а также скрывает кнопку «Загрузить», для того, чтобы пока не пришел ответ с сервера, пользователь не смог загрузить новый файл.
Теперь давайте создадим файл upload.php, которому будет передаваться файл:
Здесь нет ничего нового! Обо всем этом я рассказывал в предыдущих постах. Единственное, что я добавил — это формирование строки, которая содержит обычный JavaScript код. Когда ответ сервера будет загружет во фрейм, код будет автоматически выполнен.
Для удобства использования, я создаю объект JavaScript
названия свойств которого будут совпадать с ключами массива.
Если возникает ошибка, то этот объект будет содержать следующее значение:
Если ошибок нет, то этот объект будет содержать информацию о загруженном файле.
Дата: 6 января 2011 64189 18
Загрузка файлов в веб-приложениях является обычной практикой. В этой статье я расскажу, как загрузить файлы на сервер с помощью PHP.
Но в начале я бы хотел сказать пару слов о том, как же происходит загрузка файлов.
Для этого нам понадобится html форма с полем ввода типа . Кроме того, для передачи файлов на сервер необходимо форме установить тип multipart. Для этого в качестве параметра enctype указывается значение multipart/form-data.
После того, как на html страничке мы разместим форму с полем в окне браузера отобразится поле с возможностью выбрать файл на локальном компьютере.
После того, как пользователь выберет нужный файл и нажмет кнопку «Загрузить» форма передаст данные php скрипту на сервер, который указан в action формы. Если action формы пустой, то данные будут переданы тому же файлу, на котором находится форма. Вся информация о загружаемом файле помещается в массив $ _FILES. Нам лишь остается извлечь эту информацию и переместить файл в необходимое нам место.
Прежде, чем приступить к написанию скрипта обработки multipart-формы, нужно отредактировать файл конфигурации php.ini, чтобы разрешить загрузку файлов на сервер.
Конфигурационный файл PHP php.ini имеет три параметра, связанные с загрузкой файлов на сервер:
Итак, создайте новый файл с именем upload.php и скопируйте в него следующий код.
Если внимательно посмотреть на форму, то Вы увидите скрытое поле
Оно указывает на максимальный размер принимаемого файла в байтах. Но не следует доверять этому значения, так как оно является лишь уведомляющим и его легко можно обойти! Так что имейте это в виду!
После того как пользователь выбрал файл и нажал на кнопку «Загрузить», вся информация о файле, как упоминалось ранее, помещается в массив $ _FILES, а сам файл помещается во временный каталог на сервере, который указан в в php.ini.
Так как поле file называлось name="uploadFile", то массив $ _FILES будет содержать ассоциативный массив с ключом "uploadFile".
- $_FILES[' uploadFile ']['name'] - имя файла до его отправки на сервер, например, pict.jpg;
- $_FILES[' uploadFile ']['size'] - размер принятого файла в байтах;
- $_FILES[' uploadFile ']['type'] - MIME-тип принятого файла (если браузер смог его определить), например: image/gif, image/png, image/jpeg, text/html;
- $_FILES[' uploadFile ']['tmp_name'] - содержит имя файла во временном каталоге, например: /tmp/phpV3b3qY;
- $_FILES[' uploadFile ']['error'] - Код ошибки, которая может возникнуть при загрузке файла.
После завершения работы скрипта, временный файл будет удален. Это означает, что мы должны его скопировать в другое место до завершения работы скрипта.
Итак, с алгоритмом разобрались! Теперь давайте взглянем на код.
Первым делом мы проверяем была ли нажата кнопка submit.
В нашем случае в качестве имени файла выступает имя временного файла на сервере - $_FILES['uploadFile']['tmp_name'], а в качестве каталога, куда будет перемещен файл – переменная $uploadedFile, которая было объявлена выше в скрипте и содержит новое место хранения файла.
Из своего опыта могу сказать, что хранить оригинальное название файла на сервере не стоит, поэтому его можно переименовать. Для этого сгенерируем случайное название для нашего файла и функция move_uploaded_file() переместит и переименует наш файл:
Ну и напоследок приведу список возможных ошибок, которые возникают во время загрузки файлов на сервер. Напоминаю, что код ошибки хранится в переменной $_FILES[' uploadFile ']['error']:
Как видите, организовать загрузку файлов на сервер не так уж и сложно. Сложнее обеспечить необходимый уровень безопасности, так как загрузка файлов на сервер может использоваться злоумышленниками для атаки на сервер.
При помощи нашего скритпа злоумышленник сможет загружать произвольные файлы на сервер, к примеру, он сможет закачать на сервер php-скрипт, который рекурсивно сможет удалить все ваши файлы на сервере или PHP-shell, так что если вы пишите свой загрузчик файлов, то к этому делу надо подойти серьезно, ничего не упустив.
В нашем примере я не ставил перед собой такой задачи, а лишь показал Вам весь механизм загрузки файлов на сервер, но в следующей статье, я покажу, как обеспечить необходимый уровень безопасности!
Читайте также: