Jquery загрузка файлов

Добрый день!

Долгое время на просторах интернета я искал информацию о реализации AJAX загрузки файлов для CodeIgniter. Разные разработчики предлагали разные технологии и примеры реализации. Я перепробовал их все, но ни одна из них не была достаточно проста и функциональна одновременно. Лишь недавно я открыл для себя jQuery File Uploader. «Он ничем не отличается от остальных» — скажите вы, но это не так. Его главное отличие — это простота и хорошая документация с примерами. В документации разобраны все callback’и, описаны все options. Внедрение в любую систему не занимает много времени.

Сегодня я покажу как можно очень просто организовать multipart загрузку файлов на сервер + drug&drop в CodeIgniter.

jQuery File Uploader + CodeIgniter

Из коробки CodeIgniter предлагает нам использовать библиотеку $this->load->library(‘upload’);, которая позволяет контролировать передаваемые файлы, ограничивая загрузку по типу, размеру, ширине и высоте изображения. Использовать ее легко и удобно, но следует отметить небольшое ограничение налагаемое на INPUT данной библиотекой. Поле INPUT должно обязательно иметь параметр name=«userfile». Соглашаемся с этим фактом и переходим в Controller к функции которая будет вызывать библиотеку Upload и, собственно, сохранять наши файлы на диск.

Пример реализации PHP функции:

public function upload(){  		$config['upload_path'] = "/application/uploads/"; 		$config['allowed_types'] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar"; 		$config['max_size']	= 2048; 		$config['max_width'] = 800; 		$config['max_height'] = 600; 		$config['encrypt_name'] = TRUE;  		$this->load->library('upload', $config);  		if ($this->upload->do_upload() == false) { 			$error = array('error' => $this->upload->display_errors()); 			echo json_encode($error); 		}else{ 			$data = $this->upload->data(); 			echo json_encode($data); 		} 	} 

Внимание! Для того, что бы у Вас работали все allowed_types необходимо дописать недостающие MIME-Types в конфигурационный файл /application/config/mimes.php

У нас готова функция для сохранения файла на сервер. Переходим к клиентской части. Нам понадобится скачать с Github jQuery File Upload . Плагин предоставляет большие возможности, но все их использовать мы не будет, воспользуемся лишь загрузкой нескольких файлов, drug&drop и progressall.

Подключаем на страницу загрузки необходимые JS:

 - jquery.fileupload.js  - jquery.fileupload-video.js  - jquery.fileupload-process.js  - jquery.iframe-transport.js  - upload.js //В комплекте не идет - напишем сами 

И CSS файл:

 - css/jquery.fileupload.css 

Добавляем наш INPUT на страницу:

<?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?> 			<span class="fileinput-button"> 				<span>Добавить файл</span> 				<input type="file" name="userfile" multiple> 			</span> <?php echo form_close(); ?> 

Осталось совсем не много — написать upload.js, который будет прослушивать событие изменения поля INPUT и вызывать загрузку выбранного файла. «А где же обещанный Drug&Drop?» — спросите Вы. Drug&Drop уже работает благодаря jQuery File Upload. Вместо вызова стандартного диалога выбора файла вы можете перетащить сразу несколько файлов на страницу и они в порядке очереди загрузятся на сервер.

И на последок Upload.js

$(document).ready(function(){  $('#fileupload').fileupload({  dataType: 'json',  progressall: function (e, data) {  var progress = parseInt(data.loaded / data.total * 100, 10);  $('.progress .bar').css('width', progress + '%'); },  done: function (e, data) {  if(data.result.error != undefined){  $('#error').html(data.result.error); // выводим на страницу сообщение об ошибке если оно есть   $('#error').fadeIn('slow');  }else{  $('#error').hide(); //на случай если сообщение об ошибке уже отображалось  $('#files').append("<img class='img-polaroid' style='margin-left:15%;padding:10px;width:auto;height:250px' src=''>");  $('#success').fadeIn('slow');  }  }  } });  }); 

data — это наш ответ от сервера, но он не является массивом с информацией о загруженном файле. Вся информация в формате JSON хранится в Data.Result. Кстати говоря console.log(data) поможет найти много интересных вещей, таких как: количество отправленных файлов, ошибки и многое другое.

Вот собственно и все, надеюсь на полезность материала.

habr.com

Кратко о jQuery и AJAX

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

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

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

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

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

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

index.html

  <!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Ajax Upload</title>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   <link rel="stylesheet" href="main.css">   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   <script type="text/javascript" src="ajaxupload.js"></script>   </head>   <body>   <div class="container">   <div class="row">   <div class="col-md-6 col-md-offset-3">   <h1>Image upload</h1>   <div class="image-preview">   <img id="preview" src="" alt="">   </div>   <form id="upload-image" enctype="multipart/form-data">   <div class="form-group">   <label for="image">Image file:</label>   <input type="file" name="image" id="image">   </div>   <input type="submit" class="btn btn-default">   </form>   <div id="result">   </div>   </div>   </div>   </div>   </body>  </html>  

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

handler.php

  // Проверяем установлен ли массив файлов и массив с переданными данными  if(isset($_FILES) && isset($_FILES['image'])) {     //Переданный массив сохраняем в переменной   $image = $_FILES['image'];     // Проверяем размер файла и если он превышает заданный размер   // завершаем выполнение скрипта и выводим ошибку   if ($image['size'] > 200000) {   die('error');   }     // Достаем формат изображения   $imageFormat = explode('.', $image['name']);   $imageFormat = $imageFormat[1];     // Генерируем новое имя для изображения. Можно сохранить и со старым   // но это не рекомендуется делать   $imageFullName = './images/' . hash('crc32',time()) . '.' . $imageFormat;     // Сохраняем тип изображения в переменную   $imageType = $image['type'];     // Сверяем доступные форматы изображений, если изображение соответствует,   // копируем изображение в папку images   if ($imageType == 'image/jpeg' || $imageType == 'image/png') {   if (move_uploaded_file($image['tmp_name'],$imageFullName)) {   echo 'success';   } else {   echo 'error';   }   }  }  

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

ajaxupload.js

  $(document).ready(function () {     function readImage ( input ) {   if (input.files && input.files[0]) {   var reader = new FileReader();     reader.onload = function (e) {   $('#preview').attr('src', e.target.result);   }     reader.readAsDataURL(input.files[0]);   }   }     function printMessage(destination, msg) {     $(destination).removeClass();     if (msg == 'success') {   $(destination).addClass('alert alert-success').text('Файл успешно загружен.');   }     if (msg == 'error') {   $(destination).addClass('alert alert-danger').text('Произошла ошибка при загрузке файла.');   }     }     $('#image').change(function(){   readImage(this);   });     $('#upload-image').on('submit',(function(e) {   e.preventDefault();     var formData = new FormData(this);     $.ajax({   type:'POST', // Тип запроса   url: 'handler.php', // Скрипт обработчика   data: formData, // Данные которые мы передаем   cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся   contentType: false, // Тип кодирования данных мы задали в форме, это отключим   processData: false, // Отключаем, так как передаем файл   success:function(data){   printMessage('#result', data);   },   error:function(data){   console.log(data);   }   });   }));  });  

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

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

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

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

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

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

Хорошего дня и успехов 🙂

adminnotes.info

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

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

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

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

Загрузка файлов на сервер на 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 код, потом объясню что и к чему.

<div id="upload" >Upload File</div>  <span id="status" ></span>   <ul id="files" ></ul>

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

<divid=»upload» >UploadFile</div> — это наша кнопка подтверждения загрузки файла на сервер. Далее приведу CSS код оформления.

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

<ulid=»files» ></ul> — это список файлов, которые были загружены на сервер, нашим jquery + ajax загрузчиком.

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

#upload{  margin:30px 200px; padding:15px;  font-weight:bold; font-size:1.3em;  font-family:Arial, Helvetica, sans-serif;  text-align:center;  background:#f2f2f2;  color:#3366cc;  border:1px solid #ccc;  width:150px;  cursor:pointer !important;  -moz-border-radius:5px; -webkit-border-radius:5px;  }

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

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

<?php  $uploaddir = './uploads/';  $file = $uploaddir . basename($_FILES['uploadfile']['name']);   if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {echo "success";}   else {echo "error";}  ?>

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

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

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

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

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

JavaScript код

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

$(function(){  var btnUpload=$('#upload');  var status=$('#status');  new AjaxUpload(btnUpload, {  action: 'upload-file.php',  //Имя файлового поля ввода  name: 'uploadfile',  onSubmit: function(file, ext){  if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){  // Валидация расширений файлов  status.text(Только JPG, PNG, GIF файлы');  return false;     }  status.text('Uploading...');  },  onComplete: function(file, response){  //Очищаем текст статуса  status.text('');  //Добавляем загруженные файлы в лист  if(response==="success"){  $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');  } else{  $('<li></li>').appendTo('#files').text(file).addClass('error');  }  }  });  });

Сначала, мы инициализируем доступ к кнопке подтверждения загрузки, и записываем в переменную 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. Несколько слов по коду и настройке плагинов:

$('.MultiFile').MultiFile({    accept:'jpg|gif|bmp|png|rar', max:15, STRING: {    remove:'удалить',   selected:'Выбраны: $file',    denied:'Неверный тип файла: $ext!',    duplicate:'Этот файл уже выбран:n$file!'    }});

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

$("#loading").ajaxStart(function(){({   ...   });

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

$('#uploadForm').ajaxForm({   ...   });

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

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 файл и поместите туда код:

<html>   <head>   <script type="text/javascript">    function onResponse(d) {    eval('var obj = ' + d + ';');    alert('Файл ' + obj.filename + (obj.success ? " " : " НЕ ") +    "загружен.");    }    </script>   </head>   <iframe id="rFrame" name="rFrame" style="display: none">   </iframe>   <form action="handler.php" target="rFrame" method="POST"    enctype="multipart/form-data">   <input type="file" name="loadfile">   <input type='submit' value='Загрузить'>   </form>   </html>

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

<?php    function jsOnResponse($obj)    {    echo '    <script type="text/javascript">    window.parent.onResponse("'.$obj.'");    </script>    ';    }       $dir = '/uploads'; // путь к каталогу загрузок на сервере    $name = basename($_FILES['loadfile']['name']);    $file = $dir . $name;       $success = move_uploaded_file($_FILES['loadfile']['tmp_name'], $file);    jsOnResponse("{'filename':'" . $name . "', 'success':'" . $success . "'}");      ?>

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

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

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

Дальше: PHP парсинг HTML, с помощью simple HTML DOM

sitear.ru

1. Плагин AJAX Upload Эндрю Волмса.

Простой ajax плагин для загрузки файлов. Преимущества:

a) Поддерживает множественную(использует XHR) загрузку файлов с индикатором загрузки в FF 3.6+, Safari 4+, Chrome, в других браузерах использует невидимые iframe.

b) Драг энд дроп поддерживается в FF 3.6+ и Chrome.

c) Возможно использование без jQuery.

d) Не использует Flash.

e) Возможна отмена загрузки.

f) Фильтрация по типам

g) Работает с https

h) Возможна установка ограничений на размер файла.

i) Поддерживает клавиатурные вызовы в FF, Chrome, Safari .

j) Проверен в IE 7,8; Firefox 3,3.6,4; Safari 4,5; Chrome; Opera 10.60;

Пример использования плагина:

var uploader = new qq.FileUploader({

// путь к элементу DOM (в jQuery следует использовать $(selector)[0])

element: document.getElementById('file-uploader'),

// путь к серверному скрипту

action: '/server/upload'

// дополнительная информация в формате ключ-значение

params: {},

// Проверка расширения

// формат ['jpg', 'jpeg', 'png', 'gif'] или []

allowedExtensions: [],

// лимит размера каждого файла в байтах

// эта опция поддерживается не во всех браузерах

sizeLimit: 0, // максимальный

minSizeLimit: 0, // минимальный

// установите это значение равным true, для вывода в консоль ответа сервера

debug: false,

// события

// можно вернуть false, чтобы прервать загрузку

onSubmit: function(id, fileName){},

onProgress: function(id, fileName, loaded, total){},

onComplete: function(id, fileName, responseJSON){},

onCancel: function(id, fileName){},

messages: {

// настройка сообщений об ошибке

},

// настройка отображения сообщений

showMessage: function(message){ alert(message); }

});

Плагин распространяется под лицензиями GNU GPL и GNU LGPL 2, как продукт с открытым исходным кодом.

Скачать его можно здесь.

Домашняя страница плагина http://valums.com/ajax-upload/.

2. Plupload

Plupload может работать на любой из следующих рантайм сред: Flash, HTML 5 Gears, HTML 5, Silverlight, BrowserPlus, HTML 4(в этой версии недоступно большинство фич).

Преимущества:

a) Поддерживает Multipart загрузку (в HTML 5 только для Gecko и WebKit).

b) Индикатор загрузки(кроме HTML 4)

c) Драг энд дроп(кроме Flash, Silverlight, HTML 4).

d) Возможность изменения размера картинок в форматах png и jpeg.

e) Загрузка по-частям(не поддерживается в HTML 4, в HTML 5 поддерживается только для Chrome и Firefox 4+)

f) Фильтрация по типам (кроме HTML 4)

g) Потоковая загрузка (кроме HTML 4 и BrowserPlus)

h) Возможна установка ограничений на размер файла.

i) Возможность настройки отсылаемых заголовков

Пример использования плагина:

var uploader = new plupload.Uploader(

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

runtimes : 'gears,html5,flash,silverlight,browserplus',

//Строковое значение идентификатора кнопки «Просмотр». Flash, HTML 5 и Silverlight накладывают невидимый слой поверх кнопки, для этого в данных рантаймах необходим идентификатор кнопки.

browse_button : 'pickfiles',

//Максимальный размер файла, который может выбрать пользователь. Эта строка может быть в одном из следующих форматов 100b, 10kb, 10mb.

max_file_size : '10mb',

//Позволяет приводить картинки к заранее заданному размеру и качеству.

resize : {width : 320, height : 240, quality : 90},

//URL на который будет производиться загрузка.

url : 'upload.php',

//URL по котрому находиться SWF-файл для Flash рантайма.

flash_swf_url : '/plupload/js/plupload.flash.swf',

// URL по котрому находиться XAP-файл для Silverlight рантайма.

silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',

//Список фильтров, которые можно применять при выборе файлов для загрузки. А конкретно, это фильтры по расширениям файлов. Для каждого фильтра есть два параметра: название и расширения.

filters : [

{title : "Файлы изображений", extensions : "jpg,gif,png"},

{title : "Zip-архивы", extensions : "zip"}

]

});

Плагин распространяется под лицензиями GNU GPL, а так же под платными лицензиями.

Скачать бесплатную версию можно здесь.

3. Плагин AjaxFileUpload.

Этот платин не имеет графического интерфейса. Его преимущества:

a) Не использует Flash.

b) Удобная интеграция в любое веб-приложение.

c) Кроссбраузерность (все что необходимо для его работы поддержка Ajax и включенный JavaScript).

d) Возможна работа через https

Пример использования плагина:

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

 function ajaxFileUpload() {

//Добавляем анимацию на начало и окончание ajax-запроса

$("#loading")

.ajaxStart(function(){

$(this).show();

})

.ajaxComplete(function(){

$(this).hide();

});

/*

Подготавливаем ajax-загрузку файла

url: ресурс, обрабатывающий загруженный файл

fileElementId: имя поля ввода типа “file” из которого будет загружаться файл, а так же индекс в массиве $_FILES(для php).

dataType: тип данных(json или xml)

secureuri: использование защищенного соединения

success: колбек-функция для случая успешного завершения ajax-запроса

error: колбек-функция для случая неуспешного завершения ajax-запроса

*/

$.ajaxFileUpload

(

{

url:'doajaxfileupload.php',

secureuri:false,

fileElementId:'fileToUpload',

dataType: 'json',

success: function (data, status)

{

if(typeof(data.error) != 'undefined')

{

if(data.error != '')

{

alert(data.error);

}else

{

alert(data.msg);

}

}

},

error: function (data, status, e)

{

alert(e);

}

}

)

return false;

}

Скачать его можно здесь.

www.developersonthe.net

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.