Ajax загрузка файла на сервер, без iframe

29 Авг
2011

Для загрузки файлов на сервер обычно используют стандартные методы, данные браузерами или скрытый iframe. Стандартные методы браузеров заставляют нас перезагружать страничку чтобы передать файл на сервер и как-то обработать его скриптами, но в текущей действительности может случиться ситуация, когда перезагрузка страницы для передачи файла серверу становиться не допустимой. Пытаясь найти сторонние решения, я увидел в интернете множество плагинов которые предлагают Ajax-загрузку файлов на сервер, но все они имели один большой недостаток, очень громоздкая структура не позволяет вносить быстрые изменения, в результате чего управляемость такими плагинами сводилась на нет. Данная ситуация с подвигла меня найти решения для Ajax-загрузки файла на сервер, которое было бы очень короткое и понятное, для того чтобы его можно было использовать для разного рода модификаций.
Хочу представить вам свой мини-проект Fileupload.
Он состоит из двух основных файлов jquery.fileupload.js и fileupload.php.
jquery.fileupload.js — подключается к телу html странички после jquery.
Использование плагина выглядит достаточно просто и привлекательно. Для того чтобы все поля для выбора файлов стали интерактивными на страничку надо добавить следующий код.

Где:
  1. url — это файл на сервере который примет и обработает загружаемый файл
  2. success — это функция которая будет выполнена после загрузки файла
  3. dataType — это формат данных в котором будет возвращен результат обработки принятого файла, есть два типа «json» и «text»

На сервере

На сервере, принимает и сохраняет файл на диск, функция fileupload(string $file) которая описана в файле fileupload.php.
Для того чтобы было более понятно как работает этот плагин я хочу предоставить пример загрузки картинок на сервер и создание из них превьющех с последующим возвратом имени файла, для моментального отображения загруженной картинки.
require_once(dirname(__FILE__).'/lib/js/fileupload/fileupload.php');
$dir = dirname(__FILE__).'/upload/avatar/';
if(!is_dir($dir)) { mkdir($dir); chmod($dir,''); }
$file = time().'.jpg';
if(fileupload($dir.$file) === true){
 require_once(dirname(__FILE__).'/lib/php/images.php');
 $res = imgResize(array('input'=>$dir.$file,'output'=>$dir.$file,'xsize'=>'70','quality'=>'70'));
 if($res['status'] == 'err') die(json_encode($res));
 echo json_encode(array('status'=>'ok','file'=>$file));
}

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



загрузка...

Комментарии:

Наверх