Ajax upload файлов


Ajax-загрузка файлов с индикатором

IT блог — Ajax-загрузка файлов с индикатором

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В основном это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest. Мы описывали работу с Ajax с помощью библиотеки jQuery в статьях jQuery и Ajax и Использование Ajax.

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

В качестве тестового проекта создайте пустое приложение ASP.NET MVC в Visual Studio. Мы будем использовать C# на бэкенде (как я уже говорил, основное внимание мы уделим написанию JavaScript, так что для серверной части вы можете использовать любой другой язык). Добавьте библиотеку jQuery с помощью диспетчера пакетов NuGet (View Other Windows Package manager Console):

Добавьте в папку Controllers класс контроллера HomeController.cs со следующим содержимым (напомню, контроллер Home используется по умолчанию в настройках маршрутизации проекта – файл /App_Start/RouteConfig.cs):

Щелкните правой кнопкой мыши по методу Index и выберите в контекстном меню команду Add View. Visual Studio создаст файл представления /Views/Home/index.cshtml, а также компоновку по умолчанию /Views/Shared/_Layout.cshtml. Давайте подключим библиотеку jQuery в файле компоновки:

Здесь мы также добавили сброс стилей CSS для браузера и подключили таблицу стилей /Content/Site.css. Добавьте также файл script.js в папку scripts. Давайте теперь добавим форму для загрузки файлов в проект. Для этого откройте представление Index.cshtml и используйте следующую разметку:

В элементе section находится форма со вставкой загружаемых файлов. Файлы можно поместить в этот контейнер путем перетаскивания (drag-and-drop), либо через диалоговое окно после щелчка по элементу section. Элемент progress будет содержать индикатор загрузки файлов, в элементе error будут отображаться ошибки, а контейнер images нужен для отображения сохраненных на сервере картинок.

Теперь нам нужно добавить CSS-стили для страницы. Для этого отредактируйте файл /Content/Site.css следующим образом:

На данный момент форма выглядит следующим образом:

Теперь нам нужно добавить скрипт, который должен обеспечивать следующий функционал:

При клике по элементу section должно открываться модальное окно с выбором файла.

При перетаскивании файлов из проводника в окно браузера, элемент section должен подсвечиваться как при наведении курсора мыши (для этого мы добавили CSS-класс «dd&raqio;). При отпускании файлов (как и при выборе файла из диалогового окна) должна происходить загрузка картинок на сервер.

При загрузке файлов необходимо добавить индикатор и отобразить процент выполнения загрузки.

В случае ошибки на сервере, необходимо отобразить ошибки и скрыть индикатор.

В случае успешной загрузки картинок на сервер, необходимо отобразить их в контейнере images.

Следующий скрипт (файл script.js) решает все вышеуказанные вопросы:

Для сохранения списка файлов и передачи его на сервер через Ajax используется объект FormData.

Обратите внимание, что за отслеживание процесса загрузки отвечает свойство xhrFields объекта, передаваемого методу $.ajax. В этом свойстве хранится объект с функцией обработки события onprogress. Этому событию передается объект со свойствами loaded – объем уже загруженных данных, и total – общий размер данных. Благодаря этим двум параметрам мы можем отображать процесс выполнения загрузки на индикаторе.

В методе $.ajax() мы ссылаемся на метод действия Upload контроллера HomeController, который еще не был добавлен. Давайте исправим это и отредактируем файл HomeController.cs:

Здесь мы получаем файлы из индексатора Files объекта HttpRequestBase, который доступен в контроллере ASP.NET через свойство Request. Далее мы выполняем две простые проверки – размер файла не должен превышать 2 Мб и тип файлов должен быть либо JPG либо PNG. В случае несоответствия файла проверкам в скрипт возвращается объект с ошибкой, которая отображается пользователю. Иначе файл сохраняется в папке uploads проекта, ему присваивается сгенерированное с помощью GUID случайное имя.

Перед тестированием данного примера не забудьте добавить в корень проекта папку uploads.

ez code

Просто о сложном.

Красивая AJAX форма для загрузки файлов

В этом уроке мы сделаем небольшую AJAX форму для загрузки файлов, которая позволит посетителям загружать файлы с помощью технологии drag/drop или при помощи обычного выбора файлов.

Мы будем использовать плагины jQuery File Upload и jQuery Knob для отображения прогресса загрузки.

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

Как обычно, начнем с HTML5 разметки:

В теге нашего документа, подключаем шрифты Google Webfonts, а перед закрытием тега — JavaScript библиотеки: jQuery, jQuery Knob и jQuery File Upload.

Главный элемент страницы — форма #upload. Внутри нее элемент #drop (принимает файлы с использованием drag&drop) и список, в котором будут отображаться загружаемые файлы. Разметка, которая будет генерироваться для загруженных файлов:

Элемент input будет спрятан с помощью CSS. Он нужен для инициализации плагина jQuery Knob, который будет рисовать шкалу процесса загрузки файла. Input имеет атрибуты data-*, которые используются для обновления шкалы. Позже, когда мы будет отслеживать прогресс загрузки, мы будем обновлять эти значения для перерисовки шкалы. span будет содержать зеленую галку или красный крест.


jQuery

У посетителя будет 2 способа загрузки файла:

  • Перетащить файл в окно браузера (в IE не работает).
  • Нажатием на кнопку browse. Будет имитировано нажатие на спрятанный input и показано системное окно выбора файлов. Обратите внимание, что input имеет параметр multiple параметр, что позволит выбирать много файлов за один раз.

Когда файлы будут выбраны, они помещаются в очередь для последующей автоматической загрузки:

В jQuery File Upload есть собственный интерфейс, но мы используем базовую версию плагина для создания собственного дизайна интерфейса. И чтобы наш интерфейс работал, мы передаем плагину несколько параметров / колбэков:

  • dropZone – этот параметр содержит jQuery селектор, который будет принимать перетаскиваемые файлы. Файлы, брошенные на него, будут добавлены в очередь загрузки.
  • add – функция вызывается при добавлении файла в очередь загрузки. Она будет генерировать разметку для файлов и вызвать метод data.submit() .
  • progress – Эта функция будет вызываться каждые 100ms (можно изменить). Второй аргумент содержит размер файла и количество загруженных байт. Это позволяет отслеживать прогресс и обновлять шкалу.
  • fail – функция вызывается при возникновении ошибки.

В комплект jQuery File Upload входит также и PHP скрипт для обработки файлов на сервере, но мы напишем свой. Процесс загрузки фалов будет происходить также как и при обычной загрузке, поэтому всю информацию о них мы можем получить из глобального массива $_FILES:

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

Загрузка файла на сервер при помощи AJAX и PHP

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

Есть возможность реализации этой затеи 2-мя способами:

  1. Чтобы файл загрузился после выбора файла автоматом;
  2. Чтобы файл грузил в последствии нажатии на кнопку загрузки.

Чтобы файл загрузился после выбора файла автоматом

Для этого сначала создадим форму и поле файла:

HTML5 Ajax upload очень больших файлов

В этой небольшой заметке рассмотрен способ загрузки очень больших файлов (больше 2Гб) через браузер. Метод приведенный в этой заметке хорош тем что:

  • Файл загружается асинхронно. В это время на странице отображается индикатор загрузки (ProgressBar);
  • Файл загружается по частям и не считывается целиком в память ни сервером ни браузером клиента;
  • Браузер повторяет загрузку секции, если предыдущая попытка закончилась неудачно. Это очень полезное свойство при загрузке больших файлов по HTTP.

Плох этот методом тем, что требует использования браузера на базе Gecko 2.0 и выше или WebKit. На текущий момент, это такие браузеры как FireFox 4.0+, SeaMonkey 2.1+ или Google Chrome 11+.

Основная идея

Файл считывается по частям с помощью методов slice(), mozSlice() или webkitSlice() объекта Blob [2]. После этого, каждая часть отправляется на сервер с помощью sendAsBinary() объекта XMLHttpRequest [1]. Если часть по какой-то причине не загрузилась, то производится попытка загрузить часть снова.

Стоит обратить внимание, что метод slice() объекта Blob устарел начиная с версии Gecko 2.0 (FireFox 4), метод mozSlice() добавлен в Gecko 5.0 (FireFox 5) и метод webkitSlice() добавлен Google Chrome 11.

Еще в Google Chrome нет метода sendAsBinary() объекта XMLHttpRequest.

fileuploader.js

JavaScript код работает на стороне клиента (в браузере), считывает файл по частям и отправляет его на сервер.

// Для начала определим метод XMLHttpRequest.sendAsBinary(),
// если он не определен (Например, для браузера Google Chrome).

if ( ! XMLHttpRequest. prototype . sendAsBinary ) <

XMLHttpRequest. prototype . sendAsBinary = function ( datastr ) <
function byteValue ( x ) <
return x. charCodeAt ( 0 ) & 0xff ;
>
var ords = Array. prototype . map . call ( datastr , byteValue ) ;
var ui8a = new Uint8Array ( ords ) ;
this . send ( ui8a. buffer ) ;
>
>

/**
* Класс FileUploader.
* @param ioptions Ассоциативный массив опций загрузки
*/
function FileUploader ( ioptions ) <

// Позиция, с которой будем загружать файл
this . position = 0 ;


// Размер загружаемого файла
this . filesize = 0 ;

// Объект Blob или File (FileList[i])
this . file = null ;

// Ассоциативный массив опций
this . options = ioptions ;

// Если не определена опция uploadscript, то возвращаем null. Нельзя
// продолжать, если эта опция не определена.
if ( this . options [ ‘uploadscript’ ] == undefined ) return null ;

/*
* Проверка, поддерживает ли браузер необходимые объекты
* @return true, если браузер поддерживает все необходимые объекты
*/
this . CheckBrowser = function ( ) <
if ( window. File && window. FileReader && window. FileList && window. Blob ) return true ; else return false ;
>

/*
* Загрузка части файла на сервер
* @param from Позиция, с которой будем загружать файл
*/
this . UploadPortion = function ( from ) <

// Объект FileReader, в него будем считывать часть загружаемого файла
var reader = new FileReader ( ) ;

// Текущий объект
var that = this ;

// Позиция с которой будем загружать файл
var loadfrom = from ;

// Объект Blob, для частичного считывания файла
var blob = null ;

// Таймаут для функции setTimeout. С помощью этой функции реализована повторная попытка загрузки
// по таймауту (что не совсем корректно)
var xhrHttpTimeout = null ;

/*
* Событие срабатывающее после чтения части файла в FileReader
* @param evt Событие
*/
reader. onloadend = function ( evt ) <
if ( evt. target . readyState == FileReader. DONE ) <

// Создадим объект XMLHttpRequest, установим адрес скрипта для POST
// и необходимые заголовки HTTP запроса.
var xhr = new XMLHttpRequest ( ) ;
xhr. open ( ‘POST’ , that. options [ ‘uploadscript’ ] , true ) ;
xhr. setRequestHeader ( «Content-Type» , «application/x-binary; charset=x-user-defined» ) ;

Илон Маск рекомендует:  Что такое код asp getpreviousdescription

// Идентификатор загрузки (чтобы знать на стороне сервера что с чем склеивать)
xhr. setRequestHeader ( «Upload-Id» , that. options [ ‘uploadid’ ] ) ;
// Позиция начала в файле
xhr. setRequestHeader ( «Portion-From» , from ) ;
// Размер порции
xhr. setRequestHeader ( «Portion-Size» , that. options [ ‘portion’ ] ) ;

// Установим таймаут
that. xhrHttpTimeout = setTimeout ( function ( ) <
xhr. abort ( ) ;
> , that. options [ ‘timeout’ ] ) ;

/*
* Событие XMLHttpRequest.onProcess. Отрисовка ProgressBar.
* @param evt Событие
*/
xhr. upload . addEventListener ( «progress» , function ( evt ) <
if ( evt. lengthComputable ) <

// Посчитаем количество закаченного в процентах (с точность до 0.1)
var percentComplete = Math. round ( ( loadfrom + evt. loaded ) * 1000 / that. filesize ) ; percentComplete /= 10 ;

// Посчитаем ширину синей полоски ProgressBar
var w >= Math. round ( ( loadfrom + evt. loaded ) * 300 / that. filesize ) ;

// Изменим свойства элементом ProgressBar’а, добавим к нему текст
var div1 = document. getElementById ( ‘cnuploader_progressbar’ ) ;
var div2 = document. getElementById ( ‘cnuploader_progresscomplete’ ) ;

div1. style . display = ‘block’ ;
div2. style . display = ‘block’ ;
div2. style . width = w >+ ‘px’ ;
if ( percentComplete 30 ) <
div2. textContent = » ;
div1. textContent = percentComplete + ‘%’ ;
>
else <
div2. textContent = percentComplete + ‘%’ ;
div1. textContent = » ;
>
>

/*
* Событие XMLHttpRequest.onLoad. Окончание загрузки порции.
* @param evt Событие
*/
xhr. addEventListener ( «load» , function ( evt ) <

// Очистим таймаут
clearTimeout ( that. xhrHttpTimeout ) ;

// Если сервер не вернул HTTP статус 200, то выведем окно с сообщением сервера.
if ( evt. target . status != 200 ) <
alert ( evt. target . responseText ) ;
return ;
>

// Добавим к текущей позиции размер порции.
that. position += that. options [ ‘portion’ ] ;

// Закачаем следующую порцию, если файл еще не кончился.
if ( that. filesize > that. position ) <
that. UploadPortion ( that. position ) ;
>
else <
// Если все порции загружены, сообщим об этом серверу. XMLHttpRequest, метод GET,
// PHP скрипт тот-же.
var gxhr = new XMLHttpRequest ( ) ;
gxhr. open ( ‘GET’ , that. options [ ‘uploadscript’ ] + ‘?action=done’ , true ) ;

// Установим идентификатор загруки.
gxhr. setRequestHeader ( «Upload-Id» , that. options [ ‘uploadid’ ] ) ;

/*
* Событие XMLHttpRequest.onLoad. Окончание загрузки сообщения об окончании загрузки файла :).
* @param evt Событие
*/
gxhr. addEventListener ( «load» , function ( evt ) <

// Если сервер не вернул HTTP статус 200, то выведем окно с сообщением сервера.
if ( evt. target . status != 200 ) <
alert ( evt. target . responseText . toString ( ) ) ;
return ;
>
// Если все нормально, то отправим пользователя дальше. Там может быть сообщение
// об успешной загрузке или следующий шаг формы с дополнительным полями.
else window. parent . location = that. options [ ‘redirect_success’ ] ;
> , false ) ;

// Отправим HTTP GET запрос
gxhr. sendAsBinary ( » ) ;
>
> , false ) ;

/*
* Событие XMLHttpRequest.onError. Ошибка при загрузке
* @param evt Событие
*/
xhr. addEventListener ( «error» , function ( evt ) <

// Очистим таймаут
clearTimeout ( that. xhrHttpTimeout ) ;

// Сообщим серверу об ошибке во время загруке, сервер сможет удалить уже загруженные части.
// XMLHttpRequest, метод GET, PHP скрипт тот-же.
var gxhr = new XMLHttpRequest ( ) ;

gxhr. open ( ‘GET’ , that. options [ ‘uploadscript’ ] + ‘?action=abort’ , true ) ;


// Установим идентификатор загруки.
gxhr. setRequestHeader ( «Upload-Id» , that. options [ ‘uploadid’ ] ) ;

/*
* Событие XMLHttpRequest.onLoad. Окончание загрузки сообщения об ошибке загрузки :).
* @param evt Событие
*/
gxhr. addEventListener ( «load» , function ( evt ) <

// Если сервер не вернул HTTP статус 200, то выведем окно с сообщением сервера.
if ( evt. target . status != 200 ) <
alert ( evt. target . responseText ) ;
return ;
>
> , false ) ;

// Отправим HTTP GET запрос
gxhr. sendAsBinary ( » ) ;

// Отобразим сообщение об ошибке
if ( that. options [ ‘message_error’ ] == undefined ) alert ( «There was an error attempting to upload the file.» ) ; else alert ( that. options [ ‘message_error’ ] ) ;
> , false ) ;

/*
* Событие XMLHttpRequest.onAbort. Если по какой-то причине передача прервана, повторим попытку.
* @param evt Событие
*/
xhr. addEventListener ( «abort» , function ( evt ) <
clearTimeout ( that. xhrHttpTimeout ) ;
that. UploadPortion ( that. position ) ;
> , false ) ;

// Отправим порцию методом POST
xhr. sendAsBinary ( evt. target . result ) ;
>
> ;

that. blob = null ;

// Считаем порцию в объект Blob. Три условия для трех возможных определений Blob.[.*]slice().
if ( this . file . slice ) that. blob = this . file . slice ( from , from + that. options [ ‘portion’ ] ) ;
else <
if ( this . file . webkitSlice ) that. blob = this . file . webkitSlice ( from , from + that. options [ ‘portion’ ] ) ;
else <
if ( this . file . mozSlice ) that. blob = this . file . mozSlice ( from , from + that. options [ ‘portion’ ] ) ;
>
>

// Считаем Blob (часть файла) в FileReader
reader. readAsBinaryString ( that. blob ) ;
>

/*
* Загрузка файла на сервер
* return Число. Если не 0, то произошла ошибка
*/
this . Upload = function ( ) <

// Скроем форму, чтобы пользователь не отправил файл дважды
var e = document. getElementById ( this . options [ ‘form’ ] ) ;
if ( e ) e. style . display = ‘none’ ;

if ( ! this . file ) return — 1 ;
else <

// Если размер файла больше размера порциии ограничимся одной порцией
if ( this . filesize > this . options [ ‘portion’ ] ) this . UploadPortion ( 0 , this . options [ ‘portion’ ] ) ;

// Иначе отправим файл целиком
else this . UploadPortion ( 0 , this . filesize ) ;
>
>

if ( this . CheckBrowser ( ) ) <

// Установим значения по умолчанию
if ( this . options [ ‘portion’ ] == undefined ) this . options [ ‘portion’ ] = 1048576 ;
if ( this . options [ ‘timeout’ ] == undefined ) this . options [ ‘timeout’ ] = 15000 ;

// Добавим обработку события выбора файла
document. getElementById ( this . options [ ‘formfiles’ ] ) . addEventListener ( ‘change’ , function ( evt ) <

var files = evt. target . files ;

// Выберем только первый файл
for ( var i = 0 , f ; f = files [ i ] ; i ++ ) <
that. filesize = f. size ;
that. file = f ;
break ;
>
> , false ) ;

// Добавим обработку события onSubmit формы
document. getElementById ( this . options [ ‘form’ ] ) . addEventListener ( ‘submit’ , function ( evt ) <
that. Upload ( ) ;
( arguments [ 0 ] . preventDefault ) ? arguments [ 0 ] . preventDefault ( ) : arguments [ 0 ] . returnValue = false ;
> , false ) ;
>

upload.php

PHP скрипт, работает на стороне сервера. Его задача — принимать и склеивать порции. После окончания передачи всех порций скрипт переименовывает файл и создает флаг сигнализирующий о том что файл готов к обработке. В моем случае отдельный демон проверяет этот флаг и берет файлы «в оборот».

// Каталог в который будет загружаться файл
$uploaddir = «./uploaddir» ;

// Идентификатор загрузки (аплоада). Для генерации идентификатора я обычно использую функцию md5()
$hash = $_SERVER [ «HTTP_UPLOAD_ID» ] ;

// Информацию о ходе загрузки сохраним в системный лог, это позволить решать проблемы оперативнее
openlog ( «html5upload.php» , LOG_P >| LOG_PERROR , LOG_LOCAL0 ) ;

// Проверим корректность идентификатора
if ( preg_match ( «/^[0123456789abcdef]<32>$/i» , $hash ) ) <

// Если HTTP запрос сделан методом GET, то это не загрузка порции, а пост-обработка
if ( $_SERVER [ «REQUEST_METHOD» ] == «GET» ) <

// abort — сотрем загружаемый файл. Загрузка не удалась.
if ( $_GET [ «action» ] == «abort» ) <
if ( is_file ( $uploaddir . «/» . $hash . «.html5upload» ) ) unlink ( $uploaddir . «/» . $hash . «.html5upload» ) ;
print «ok abort» ;
return ;
>

// done — загрузка завершена успешно. Переименуем файл и создадим файл-флаг.
if ( $_GET [ «action» ] == «done» ) <
syslog ( LOG_INFO , «Finished for hash » . $hash ) ;

// Если файл существует, то удалим его
if ( is_file ( $uploaddir . «/» . $hash . «.original» ) ) unlink ( $uploaddir . «/» . $hash . «.original» ) ;

// Переименуем загружаемый файл
rename ( $uploaddir . «/» . $hash . «.html5upload» , $uploaddir . «/» . $hash . «.original» ) ;

// Создадим файл-флаг
$fw = fopen ( $uploaddir . «/» . $hash . «.original_ready» , «wb» ) ; if ( $fw ) fclose ( $fw ) ;
>
>


// Если HTTP запрос сделан методом POST, то это загрузка порции
elseif ( $_SERVER [ «REQUEST_METHOD» ] == «POST» ) <

syslog ( LOG_INFO , «Uploading chunk. Hash » . $hash . » (» . intval ( $_SERVER [ «HTTP_PORTION_FROM» ] ) . «-» . intval ( $_SERVER [ «HTTP_PORTION_FROM» ] + $_SERVER [ «HTTP_PORTION_SIZE» ] ) . «, size: » . intval ( $_SERVER [ «HTTP_PORTION_SIZE» ] ) . «)» ) ;

// Имя файла получим из идентификатора загрузки
$filename = $uploaddir . «/» . $hash . «.html5upload» ;

// Если загружается первая порция, то откроем файл для записи, если не первая, то для дозаписи.
if ( intval ( $_SERVER [ «HTTP_PORTION_FROM» ] ) == 0 )
$fout = fopen ( $filename , «wb» ) ;
else
$fout = fopen ( $filename , «ab» ) ;

// Если не смогли открыть файл на запись, то выдаем сообщение об ошибке
if ( ! $fout ) <
syslog ( LOG_INFO , «Can’t open file for writing: » . $filename ) ;
header ( «HTTP/1.0 500 Internal Server Error» ) ;
print «Can’t open file for writing.» ;
return ;
>

// Из stdin читаем данные отправленные методом POST — это и есть содержимое порций
$fin = fopen ( «php://input» , «rb» ) ;
if ( $fin ) <
while ( ! feof ( $fin ) ) <
// Считаем 1Мб из stdin
$data = fread ( $fin , 1024 * 1024 ) ;
// Сохраним считанные данные в файл
fwrite ( $fout , $data ) ;
>
fclose ( $fin ) ;
>

// Все нормально, вернем HTTP 200 и тело ответа «ok»
header ( «HTTP/1.0 200 OK» ) ;
print «ok \n » ;
>
else <
// Если неверный идентификатор загрузку, то вернем HTTP 500 и сообщение об ошибке
syslog ( LOG_INFO , «Uploading chunk. Wrong hash » . $hash ) ;
header ( «HTTP/1.0 500 Internal Server Error» ) ;
print «Wrong session hash.» ;
>

// Закроем syslog лог
closelog ( ) ;

index.php

Файл с HTML формой и инициализацией скрипта загрузки.

Заголовок HTML документа. Здесь, для примера, подменен идентификатор загрузки. Вы можете генерировать его на свое усмотрение.

Таблица стилей для индикатора прогресса (PorgressBar)

Подключение класса загрузки. Антикеш на всякий случай.

Форма загрузки. Изначально она скрыта, отображается только после успешной инициализации объекта-загрузчика.

/ head >
body onload = «ShowForm();» >
div >

p > Максимальный размер файла при загрузке через браузер — b > 4Гб / b > . / p >

form action = «./» method = «post» id = «uploadform» onsubmit = «return false;» style = «display:none;» >

table cellspacing = 1 >
tr > td > div id = «message» > Выберите файл: / div > / td > td > input type = «file» id = «files» name = «files[]» / > / td > / t>
/ table >
input type = «submit» value = «Загрузить >>» / >

Индикатор прогресса (PorgressBar) и подсказки

div id = «cnuploader_progressbar» > / div >
div id = «cnuploader_progresscomplete» > / div >

p > Вы сможете добавить название и описание после того как видео будет загружено на сервер. / p >

p > Мы принимаем видео, не нарушающее требования российского законодательства (не содержащее порнографию, ненормативную лексику, призыв к насилию и т.д.) и не содержащее рекламу. / p >

p > Используется загрузчик HTML5 / p >

script type = «text/javascript» >

// Создаем объект — FileUploader. Задаем опции.
var uploader = new FileUploader ( <

// Сообщение об ошибке
message_error : ‘Ошибка при загрузке файла’ ,

// ID элемента формы
form : ‘uploadform’ ,

// Идентификатор загрузки. В нашему случе хэш.
upload >: ‘ ‘ ,

// URL скрипта загрузки (описан выше).
uploadscript : ‘./upload.php’ ,

// URL, куда перенаправить пользователя при успешной загрузке
redirect_success : ‘./step2.php?hash= ‘ ,

// URL, куда отправить пользователя при ошибке загрузки
redirect_abort : ‘./abort.php?hash= ‘ ,

// Размер порции. 2 Мб
portion : 1024 * 1024 * 2
> ) ;

AJAX File Upload


In a previous post I’ve described how to upload files asynchronously on cross domains using jQuery and Upload plugin. In this article I will discuss 3 more approaches supported by modern browsers for ajax file upload using raw javascript.

Sending form data to a server is accomplished by the XMLHttpRequest Interface. For later use and more convenience let’s define a function for sending AJAX requests.

Ensure that the browser supports HTML5 File API before attempt to reading a file.

To read a file, stored at the user computer or transferred via Drag & Drop, use the following approaches:

Reading a file with FormData API

  • HTML form — In this case a standard HTML form element already exists in the web page. Giving a form reference to the FormData() constructor creates a new FormData object, that’s all we need to perform prior the sending of data to server. Much the same like the AJAX Form submit technique.
  • Programmatically — Having a HTML form is not necessary to upload a file. Just create a FormData object and manually adjust its elements using the .append() and/or .set() methods.

Reading a file with FileList API

All HTML elements have an files array on them accessed via the files property. This array contains a list of files selected with element.

Reading a file with FileReader API

Web apps are able to read the content of files with using the FileReader API.

If you have any thoughts about the discussed approaches for ajax file upload, please post a comment below.

Ajax и PHP. Загрузка изображения на сервер

В наше время веб-сайты становятся все более интерактивными. Это касается не только специализированных сервисов, но и обычных интернет магазинов, блогов и небольших сайтов. Основной особенностью является асинхронный JavaScript и XML сокращенно AJAX. Эта технология позволяет браузеру в фоновом режиме общаться с веб-сервером и при обновлении данных, веб-страница не перезагружается полностью. Другими словами, мы можем делать запросы и получать ответы от сервера не перезагружая страницу в браузере.

Илон Маск рекомендует:  Что такое код define

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

На самом деле особых сложностей быть не должно, алгоритм действий:

  • Выбрать картинку
  • Нажать кнопку “Отправить”
  • Перехватить вызов формы с помощью JavaScript (jQuery)
  • Передать содержимое в специальный php скрипт-обработчик
  • Вернуть результат выполнения
  • Обработать результат при помощи JavaScript (jQuery)
  • Вывести пользователю информацию о загрузке

Кратко о jQuery и AJAX

Немного отклонюсь от темы и объясню что такое jQuery. jQuery — это специальная JavaScript библиотека, которая помогает упростить разработку веб приложений в несколько раз, также данная библиотека предоставляет API для работы с AJAX. Простыми словами, мы напишем меньше кода, чем если бы это делали на чистом JS.

Ajax позволяет не перезагружая веб-страницу, обмениваться данными с веб-сервером и обновлять ее содержимое.

Я склоняюсь к тому, что если есть инструмент, который позволяет вам ускорить разработку без последствий, то почему бы его не использовать? Но чистый JS тоже не помешало бы знать(хоть и лично мой уровень владения JS равен уровню копипаста примеров со stackoverflow �� ).

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

Нам понадобится 3 простых файла, это:

  • Страница с формой
  • php обработчик
  • файл js

index.html

Обычная html страница с формой. Обратите внимание на enctype=»multipart/form-data» , это нужно для передачи файлов, параметр указывает на способ кодирования данных. Если передаете файлы, значение всегда должно быть multipart/form-data .


handler.php

Это очень упрощенный обработчик. Имя картинки я сгенерировал использовав функцию hash . Хорошей практикой считается изменять имена файлов при загрузке их на сервер.

ajaxupload.js

В этом скрипте происходит самое интересное. При помощи функции readImage() мы будем считывать файл с поля формы и передавать его в блок для предварительного просмотра. Создается объект FileReader . Он позволяет веб-приложению считывать содержимое файла на компьютере пользователя. Событие .onload сработает когда содержимое будет считано, при помощи этого события мы выведем изображение в блок предварительного просмотра.
И напоследок, метод .readAsDataURL() запускает процесс чтения файла, по завершению чтения будет выполнено событие .onload и картинка появится у вас на экране.

Функция printMessage создана для вывода информации об успешной или провалившейся попытке загрузки файла. Подробно не рассматриваем, ничего особенного не представляет.

Перехват формы и её обработка. При клике на кнопку «Отправить» событие будет перехвачено скриптом и при помощи функции .preventDefault() форма не отправит данные в index.html . .preventDefault() служит для отмены вызова каких-либо событий.

Объект FormData нужен нам для создания POST запроса к нашему скрипту, это намного проще чем вписывать каждый элемент формы в строку. Создали объект, заполнили данными, отдали в наш ajax .

Ну и собственно сам запрос AJAX. Поскольку мы используем библиотеку jQuery, составить и выполнить такой запрос не вызовет у вас никаких проблем.

Собственно, на этом и закончим. Изображение загружается, страница не перезагружается, все довольны. Если у вас возникают вопросы или предложения, пишите комментарии.

Ajax file upload + Bitrix

Типовая задача: загрузка файла Аяксом. В данном случае — подгрузка аватарки авторизованным пользователем на сайте под 1С-Битрикс.

PHP-запчасть может быть любая, под ваши нужды.

Здравствуйте! Я — Андрей Панёвин и занимаюсь профессиональной разработкой сайтов на платформе 1С-Битрикс (исключительно программирование). Есть вопросы по статье? Могу подсказать и помочь по скайпу (andrey.panevin.ru), WhatsApp (+7-911-091-0670) или перепиской в ВК.
1000 р./час.

Помогла статья? На поездку на море (Охотское):

Ajax upload файлов

Загрузка файлов по частям с помощью JQUERY + AJAX + PHP

Скопировать из вендора js-файл: src/public/js/file_upload.js

Для input тега необходимо добавить CSS класс: «js-ajax-upload» Указание URL загрузки (JS):

Указание количество одновременных передаваемых частей на сервер (JS):

Указание размера одного пакета в байтах (JS):

Указание максимальное количество секунд ожидания ответа от сервера (JS):

При каждой загрузке одной части пакета у input`а указывается data аттрибут «data-percent» и вызывается событие «ajax-upload-percent»

После полной загрузки файла вызывается событие «ajax-upload-success», в которое так же передаются все данные пришедшие с сервера

Реинициализация (при ajax загрузке элементов, JS)

Загрузка файлов с помощью AJAX

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

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

О, конечно, были хаки; но если вы похожи на меня и чувствуете себя грязными каждый раз, когда вы вводите iframe , вам это очень понравится. Присоединяйтесь ко мне!

Ищете быстрое решение?

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

Этот HTML5 загрузчик файлов особенно примечателен — вы можете легко добавлять файлы, перетаскивая их или кликая. Все файлы будут загружены через AJAX или могут быть добавлены в форму, и файлы могут быть переименованы перед загрузкой. Отличное, быстрое решение, если это то, что вы ищете!

У нас имеются плохие новости?

Это не работает во всех браузерах. Однако с некоторым прогрессивным улучшением (или каким бы то ни было текущим модным словом) у нас будет страница загрузки, которая будет работать даже в IE6 (хотя и без черт AJAX).


Наша AJAX-загрузка будет работать до тех пор, пока доступен FormData ; в противном случае пользователь получит обычную загрузку.

В нашем проекте есть три основных компонента.

  • multiple атрибуты элемента input файла.
  • Объект FileReader из нового API файлов.
  • Объект FormData из XMLHttpRequest2.

Мы используем атрибут multiple , чтобы позволить пользователю выбирать несколько файлов для загрузки (многократная загрузка файлов будет работать нормально, даже если FormData недоступен). Как вы увидите, FileReader позволяет нам показывать миниатюры загружаемых файлов (мы будем ожидать изображения).

Ни одна из наших трех функций не работает в IE9, поэтому все пользователи IE получат нормальную загрузку (хотя я понимаю, что поддержка `FileReader` доступна в IE10 Dev Preview 2). FileReader не работает в последней версии Safari (5.1), поэтому они не получат миниатюры, но они получат загрузку AJAX и подтверждение. Наконец, Opera 10.50 поддерживает FileReader , но не поддерживает FormData , поэтому он получит миниатюры, но обычную загрузку.

Чтобы продолжить путь, давайте приступим к кодированию!

Шаг 1: Разметка и стилизация

Начнем с некоторой базовой разметки и стилизации. Конечно, это не основная часть этого урока, я не буду относиться к вам как к новичку.

HTML-код

Довольно просто, не так ли? У нас есть форма, в которая отправляется post’ом на upload.php , который мы рассмотрим через секунду, и один элемент ввода, типа file . Обратите внимание, что он имеет boolean-атрибут multiple , который позволяет пользователю одновременно выбирать несколько файлов.

Это действительно все, что нужно было здесь увидеть. Давайте двигаться дальше.

Здесь нет абсолютно никаких особенностей.

Шаг 2: PHP

Мы также должны иметь возможность обрабатывать загрузки файлов на стороне сервера, поэтому давайте рассмотрим это далее.

upload.php

Имейте в виду, что это были первые строки на PHP, которые я написал с легкостью первый год (я парень из Ruby). Вероятно, вам стоит немного позаботиться о безопасности; однако мы просто следим за тем, чтобы не было ошибок при загрузке. Мы используем встроенную функцию move_uploaded_file , чтобы переместить файл в папку uploads . Не забудьте убедиться, что папка доступна для записи.

Итак, прямо сейчас у нас должна быть рабочая форма загрузки. Вы выбираете изображение (несколько, если хотите, и ваш браузер это позволяет), нажмите кнопку “Upload Files!”, и вы получите сообщение “Successfully Uploaded Images.”

Вот как выглядит наш мини-проект:

Но, сейчас 2011 год: мы хотим большего. Вы заметите, что мы связали jQuery и файл upload.js . Давайте рассмотрим это подробней.

Шаг 3: JavaScript

Давайте не будем терять время: здесь начнем!

Вот с чего мы начинаем. Мы создаем две переменные: input — это наш элемент ввода файла; formdata будет использоваться для отправки изображений на сервер, если браузер поддерживает это. Мы инициализируем его значением false , а затем проверяем, поддерживает ли браузер FormData ; Если это так, мы создаем новый объект FormData . Кроме того, если мы можем отправить изображения с помощью AJAX, нам не нужна кнопка “Upload Images!”, Поэтому мы можем скрыть ее. Почему нам это не нужно? Ну, мы собираемся автоматически загружать изображения сразу после того, как пользователь их выбирает.

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

Функция принимает один параметр: источник изображения (мы увидим, как его получать). Затем мы просто находим список в нашей разметке и создаем элемент списка и изображение. Мы установили источник изображения в полученный нами источник, поместили изображение в элемент списка и поместили элемент списка в список. Вуаля!

Затем мы должны фактически отображать изображения, отображать их и загружать. Как мы уже говорили, мы это сделаем, когда событие onchange будет запущено на входном элементе.

Нам не нужно беспокоиться о проприетарной модели событий IE, потому что IE9 + поддерживает стандартную функцию addEventListener.

Там доступно больше возможностей, но давайте начнем с этого. Во-первых, нам не нужно беспокоиться о проприетарной модели событий IE, потому что IE9 + поддерживает стандартную функцию addEventListener (а IE9 и ниже не поддерживают новые функции).

Итак, что мы хотим делать, когда пользователь выбрал файлы? Во-первых, мы создаем несколько переменных. Единственный важный момент сейчас — это len = this.files.length . Файлы, которые пользователь выбрал, будут доступны из объекта this.files . Прямо сейчас, нас беспокоит только свойство length , поэтому мы можем перебирать файлы .

. это именно то, что мы делаем дальше. Внутри нашего цикла мы устанавливаем текущий файл в file для удобства доступа. Следующее, что мы делаем, это подтверждение того, что файл является изображением. Мы можем сделать это, сравнивая свойство type с регулярным выражением. Мы ищем тип, начинающийся с «image», за которым следует что-либо. (Двойной знак восклицания впереди просто преобразует результат в булев тип.)

Итак, что нам делать, если у нас есть изображение на руках?

Мы проверяем, поддерживает ли браузер создание объектов FileReader . Если это произойдет, мы его создадим.

Вот как мы используем объект FileReader : мы собираемся передать наш объект file методу reader.readAsDataURL . Это создает URL-адрес для загруженного изображения. Однако это не работает так, как вы ожидали. URL-адрес данных не возвращается из функции. Вместо этого URL-адрес данных будет частью объекта события.


Имея это в виду, нам нужно зарегистрировать функцию на событие reader.onloadend . Эта функция принимает объект события, с помощью которого мы получаем URL-адрес данных: он находится на e.target.result (да, e.target является объектом reader , но у меня были проблемы при использовании reader вместо e.target внутри этой функции) , Мы просто передадим этот URL-адрес нашей функции showUploadedItem (которую мы написали выше).

Илон Маск рекомендует:  Опции ввода

Затем мы проверяем объект formdata . Помните, что если браузер поддерживает FormData , formdata будет объектом FormData ; в противном случае оно будет false . Итак, если у нас есть объект FormData , мы будем вызывать метод append . Цель объекта FormData — хранить значения, которые вы отправляете через форму; поэтому метод append просто берет ключ и значение. В нашем случае наш ключ — images[] ; добавив квадратные скобки к концу, мы проверяем каждый раз, что append добавляет другое значение, мы фактически добавляем его к этому массиву, а не переписываем свойство image .

Мы почти закончили. В нашем цикле for мы отобразили каждое изображение для пользователя и добавили его в объект formdata . Теперь нам просто нужно загрузить изображения. Снаружи цикла for , вот последний фрагмент нашего пазла:

Опять же, мы должны убедиться, что у нас есть поддержка FormData ; если мы этого не сделаем, кнопка “Upload Files!” будет видна, и пользователь загрузит фотографии. Однако, если у нас есть поддержка FormData , мы позаботимся о загрузке через AJAX. Мы используем jQuery для обработки всех особенностей AJAX во всех браузерах.

Вероятно, вы знакомы с методом $.ajax jQuery: вы передаете ему объект options. Свойства url , type и success обязательны. Свойством data является наш объект formdata . Обратите внимание на свойства processData и contentType . Согласно документации jQuery, processData по умолчанию является true и будет обрабатывать и преобразовывать данные в строку запроса. Мы не хотим этого делать, поэтому мы устанавливаем значение false . Мы также устанавливаем contentType в false , чтобы убедиться, что данные попадают на сервер, как мы и ожидаем.

Вот и все. Теперь, когда пользователь загружает страницу, они видят это:

И после того, как они выберут изображения, они увидят это:

Так же были загружены изображения:

Заключение

Загрузка файлов через AJAX довольно крутая, и здорово, что эти новые технологии поддерживают это без необходимости многословных хаков. Если у вас есть какие-либо вопросы о том, что мы здесь сделали, напишите это в комментариях! Большое вам спасибо за чтение!

И если вам по-прежнему нужна помощь в этой или любой другой проблеме с кодингом, вы можете найти решение в Envato Studio.

AJAX загрузка файлов на сервер + jQuery, IFRAME, PHP

Это очень интересная статья, о том, как загрузить файлы на сервер с помощью технологии AJAX. Как вы уже знаете, ajax это асинхронный javascript, который позволяет работать с сервером, не перезагружая страницы в браузере. Такая технология очень полезна для реализации нашей идеи: загрузить файлы на сервер не перезагружая страницы браузера. Наша идея также может быть реализована другими способами, обо всем этом читайте ниже в нашей статье.

Что мы сегодня узнаем?

Загрузка файлов на сервер на AJAX + jQuery + PHP

Реализация загрузки файлов на сервер с помощью AJAX, немного сложнее, чем просто отослать текстовый POST или GET запрос. Но не настолько сложно, чтобы понять и освоить эту методику. Если вы еще не совсем понимаете, как взаимодействуют AJAX и PHP, советую сначала прочитать статью о взаимодействии PHP и AJAX. Но, даже если вы не знаете, как работает технология AJAX, это не страшно, так как мы будем использовать библиотеку jQuery и плагин ajax_upload. И если вы будете следовать всем примерам и инструкциям шаг за шагом, то вы сможете реализовать отличный загрузчик файлов на сервер.

Суть метода: Мы создадим HTML образ загрузчика, который будет в себе содержать: файловое поле ввода, кнопку подтверждения, блок статуса загрузки (будут выводиться: «загружено» или «ошибка»), список ul (будут добавляться новые DOM элементы, другими словами это список загруженных файлов). На кнопку подтверждения мы создадим обработчик на языке JS, при этом будем использовать синтаксис jQuery, и передадим файл плагину ajax_upload, который отправит файл и все нужные данные на серверную сторону. Серверная сторона, это наше PHP приложение, которое сохранит файл в нужную папку и возвратит результат работы. Или же просто возвратит сообщение об ошибке, если что-то пойдет не так. Задание есть, приступим?

HTML код ajax загрузчика

Давайте создадим HTML файл, в котором будет каркас нашего загрузчика файлов. Приведу HTML код, потом объясню что и к чему.

Как видите, HTML код ajax загрузчика, невыносимо сложный. Но все же стоит прояснить, что и к чему:

UploadFile — это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.

— это блок, в который мы будем помещать ответ серверной стороны приложения. Или «Загружено», или «Ошибка».

— это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.

Как и было обещано, приведу ниже CSS код стиля, кнопки подтверждения загрузки файла:

Серверная PHP сторона приложения

Как упоминалось в сущности метода, серверная сторона всего лишь выполняет копирование (сохранение) файла и возвращает результат своей работы («Загружено» или «Ошибка»). Но, это только пример, на который полагаться не стоит. Здесь нет защиты от хакерских взломов, и не установлены ограничение на размер файлов. Если у вы будете создавать загрузчик для всеобщего пользования, то обязательно реализуйте вышеперечисленные дополнения. Ниже приведен PHP код примера загрузчика файлов, создайте файл с именем upload-file.php, и поместите в него следующий код:

Если внимательно присмотреться, то заметите что здесь все написано русским текстом, а точнее:

$uploaddir – каталог на сервере, куда будут загружаться файлы.

$file – имя загружаемого файла, к которому прикрепляется путь к серверному каталогу.

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

Самое простое уже сделано. Впереди самое интересное – jQuery + AJAX сторона загрузчика файлов.

JavaScript код

Как и в любом другом приложении, использующем JS, код должен быть помещен в шапку (head), документа. Еще одно важное замечание: перед написанием данного JS кода, не забудьте заранее подключить библиотеку jQuery и плагин ajax_upload. Если вы уже это сделали, отлично, приступим к написанию кода:


Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную btnUpload. Заодно и получаем доступ к блоку серверных сообщений (status). Далее идет работа с плагином ajaxupload. Создаем новый объект и указываем нужные нам параметры:

Action – путь к нашему серверному обработчику загруженных файлов.

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

onSubmit – Функции, которые выполняются перед ajax загрузкой файлов на сервер. В нашем случае, это валидация загружаемых файлов (проверка поддерживаемых расширений). Но опять, проверка, как говорится для «недалеких», эту проверку легко обойти, поэтому стоит еще раз проверять на серверной стороне приложения.

status.text – текст, который выводится в процессе ajax загрузки файлов на сервер. Заметьте, если файлы не поддерживаемые, то выводится сообщение об ошибке.

onComplete – Запускаем функцию по завершению загрузки файла на сервер. В этой функции: очищаем значение status.text; добавляем загруженные файлы в лист files.

Как видите загрузить файлы на сервер с помощью AJAX, проще, чем казалось. Но все-таки, меня смущает наличие библиотеки jQuery в данном методе. И если вы знаете, как реализовать ajax загрузку файлов без использования jQuery, убедительная просьба сообщить в комментариях к статье.

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

Загрузка нескольких файлов на сервер на AJAX, jQuery, PHP

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

jQuery Form Plugin v2.18

Плагин для корректной ajax работы с полями и формами.

Где взять: www.malsup.com/jquery/form/

jQuery BlockUI Plugin v2.14

Плагин, позволяющий выводить красивые сообщения об ошибке.

Где взять: www.malsup.com/jquery/block/

jQuery Multiple File Upload Plugin v1.31

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

Где взять: www.fyneworks.com/jquery/multiple-file-upload/

Если вы уже скачали все эти плагины, и само собой, библиотеку jQuery, можем приступать к разработке. Также, нам необходимо создать PHP файл, как и в предыдущем примере, который будет обрабатывать данные на серверной стороне. Назовем его: doajaxfileupload.php. Теперь, поподробнее.

jQuery Form Plugin – отличный плагин, он используется для отправки файлов на сервер методом ajax. Этому плагину, можно найти и другие применения.

jQuery BlockUI Plugin – используется в эстетических целях, для вывода красивых сообщений о корректности работы плагина MultipleFileUploadPlugin.

MultipleFileUploadPlugin – этот плагин, основа нашего мульти файлового загрузчика. Он позволяет выбрать несколько файлов. При этом, он имеет гибкие настройки, для ограничения типа файлов, установки количества загружаемых файлов, проверяет файл на дубликаты (если такой файл уже выбран) и т.д.

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

В файле index.php, думаю и так все понятно. Здесь находится, собственно форма загрузки файлов и подключаются библиотека jQuery и все необходимые плагины для работы с ajax. Несколько слов по коду и настройке плагинов:

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

Показывает и убирает анимацию при ajax загрузке файлов на сервер.

Отвечает за отправку файлов на сервер.

doajaxfileupload.php – это наша серверная сторона приложения, в нем все достаточно понятно, если вам необходимо, можете отредактировать на свой вкус.

Пожалуй, все о загрузке нескольких файлов на сервер методом AJAX, jQuery и PHP. Надеюсь, у вас все работает, также хорошо как у меня.

Загрузка файлов на JS + IFRAME + PHP

Если вы поклонник не красоты, а функциональности и компактности кода, то для вас есть хорошая новость. Загружать файлы на сервер без перезагрузки страницы, можно не только с помощью AJAX и всяких там jQuery плагинов. Также, это можно реализовать с помощью простого JavaScript, iframe (фреймов) и php (он всегда необходим). Дело в том, что на AJAX, невозможно реализовать загрузку файлов. XmlHttpRequest не способный загружать файлы. Хотя, это можно обойти. С помощью технологии Remote Scripting. В частности используя IFRAME. Интересно то, что мы будем создавать форму как при обычной загрузке файлов, только в форме мы будем указывать target=»rFrame», ссылаться на скрытый iframe, который будет перезагружен, но визуально этого не отобразиться. После перезагрузки, из серверной php стороны приложения, будет возвращен JS вызов функции, который завершит загрузку файла.

Данный загрузчик простой, состоит из двух файлов, и весит около 1 КБ. Ближе к делу. Создайте ваш HTML файл и поместите туда код:

Здесь мы видим практически те же компоненты, что и при простой загрузке файлов на сервер, только: target=»rFrame» – про который мы уже говорили выше; функция onResponse – она получает JSON объект, который мы присылаем из серверной стороны. Также, не забудьте указать multipart/form-data, без которого, форма не будет загружать файлы. Далее, посмотрим на серверный код, файла handler.php:

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

Очень простой и интересный скрипт. Конечно, вы можете усовершенствовать его.

Надеюсь, у вас все работает и не выкидывает ошибок. Если вы имеете другие познания, о том, как загрузить файл на сервер с помощью AJAX, просьба, поделиться с другими в комментариях.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL