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

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

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

1. Получение данных файла из поля file

Первое что нам нужно сделать — это получить данные input поля при добавлении в него файла(ов). Для этого прикрепим к событию change свою функцию, которая установит данные файла:

// Переменная куда будут располагаться данные файлов    var files;    // Вешаем функцию на событие  // Получим данные файлов и добавим их в переменную    $('input[type=file]').change(function(){  	files = this.files;  });

Этот код сохранит данные поля type=»file» в переменную files, с которой мы будем работать дальше.

2. Загружаем файлы по клику

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

Создадим функцию, повесим ее на событие click и отправим AJAX запрос с данными файлов. Этот запрос отличается от обычного AJAX запроса, и тут не подходит обычная отправка POST данных:

// Вешаем функцию ан событие click и отправляем AJAX запрос с данными файлов    $('.submit.button').click(function( event ){  	event.stopPropagation(); // Остановка происходящего  	event.preventDe.    
оковой запрос success: function( respond, textStatus, jqXHR ){ // Если все ОК if( typeof respond.error === 'undefined' ){ // Файлы успешно загружены, делаем что нибудь здесь // выведем пути к загруженным файлам в блок '.ajax-respond' var files_path = respond.files; var html = ''; $.each( files_path, function( key, val ){ html += val +'<br>'; } ) $('.ajax-respond').html( html ); } else{ console.log('ОШИБКИ ОТВЕТА сервера: ' + respond.error ); } }, error: function( jqXHR, textStatus, errorThrown ){ console.log('ОШИБКИ AJAX запроса: ' + textStatus ); } }); });

Что делает функция? Создает новый объект new formData(), добавляет в него данные файлов из массива files. Затем этот объект данных формы передается в AJAX запрос. 2 параметра нужно установить в false обязательно:

  • processData — потому что jQuery будет конвертировать массив files в строку, и сервер не сможет получить данные.
  • contentType — потому что дефолтные установки jQuery равны application/x-www-form-urlencoded, что не предусматривает отправку файлов. А еще, если установить этот параметр в multipart/form-data, похоже это ничего не даст.

3. Загрузка файлов на сервер

Чтобы наглядно показать, как обрабатывать отправленный во втором пункте запрос, приведу простой php-скрипт, без всяких проверок.

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

<?php    // Здесь нужно сделать все проверки передаваемых файлов и вывести ошибки если нужно    // Переменная ответа    $data = array();    if( isset( $_GET['uploadfiles'] ) ){  	$error = false;  	$files = array();    	$uploaddir = './uploads/'; // . - текущая папка где находится submit.php    	// Создадим папку если её нет    	if( ! is_dir( $uploaddir ) ) mkdir( $uploaddir, 0777 );    	// переместим файлы из временной директории в указанную  	foreach( $_FILES as $file ){  		if( move_uploaded_file( $file['tmp_name'], $uploaddir . basename($file['name']) ) ){  			$files[] = realpath( $uploaddir . $file['name'] );  		}  		else{  			$error = true;  		}  	}    	$data = $error ? array('error' => 'Ошибка загрузки файлов.') : array('files' => $files );    	echo json_encode( $data );  }

Не используйте этот код напрямую! Пишите свой!

Вот и все.

Заключение


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

Чтобы не собирать весь вышеописанный код вручную, скачайте вот этот архив: ajax-file-upload.zip. Загрузите его содержимое на ваш php сервер, зайдите в паку из архива, и попробуйте загрузить файл. Вы увидите, как все это работает, сможете «пошаманить» над кодом и разобраться подробнее в реальных условиях…

Также, рекомендую к прочтению статью о базовых знаниях для создания AJAX запросов в WordPress:

Ajax в WordPress

Знания из этой статьи вам очень пригодятся при создании AJAX загрузки файлов под WordPress.

hostenko.com

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

Подробную документацию можно найти здесь: http://anasthecoder.blogspot.ae/2014/12/multi-file-select-preview-without.html

Демо: http://jsfiddle.net/anas/6v8Kz/7/embedded/result/

jsFiddle: http://jsfiddle.net/anas/6v8Kz/7/

JavaScript:

 $(document).ready(f.    
tn).parent().parent().parent().append(newRow); } function remove_file_uploader(removeBtn) { $(removeBtn).parent().parent().remove(); } function show_image_preview(file_selector) { //files selected using current file selector var files = file_selector.files; //Container of image previews var imageContainer = $(file_selector).next('table.imagePreviewTable'); //Number of images selected var number_of_images = files.length; //Build image preview row var imagePreviewRow = $('<tr class="imagePreviewRow_0"><td valign=top style="width: 510px;"></td>' + '<td valign=top><input type="button" value="X" title="Remove Image" class="removeImageButton" imageIndex="0" onclick="remove_selected_image(this)" /></td>' + '</tr> '); //Add image preview row $(imageContainer).html(imagePreviewRow); if (number_of_images > 1) { for (var i =1; i<number_of_images; i++) { /** *Generate class name of the respective image container appending index of .
ontinue; } /** * Create an image dom object dynamically */ var img = document.createElement("img"); /** * Get preview area of the image */ var preview = $(imageContainer).find('tr.imagePreviewRow_'+i).find('td:first'); /** * Append preview of selected image to the corresponding container */ preview.append(img); /** * Set style of appended preview(Can be done via css also) */ preview.find('img').addClass('previewImage').css({'max-width': '500px', 'max-height': '500px'}); /** * Initialize file reader */ var reader = new FileReader(); /** * Onload event of file reader assign target image to the preview */ reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); /** * Initiate read */ reader.readAsDataURL(file); } /** * Show preview */ $(imageContainer).show(); } function remove_selected_image(close_button) { /** * Remove this image from preview */ var imageIndex = $(close_button).attr('imageindex'); $(close_button).parents('.imagePreviewRow_' + imageIndex).remove(); } function upload_images_selected(event, formObj) { event.preventDefault(); //Get number of images var imageCount = $('.previewImage').length; //Get all multi select inputs var fileInputs = document.querySelectorAll('.multipleImageFileInput'); //Url where the image is to be uploaded var url= "/upload-directory/"; //Get number of inputs var number_of_inputs = $(fileInputs).length; var inputCount = 0; //Iterate through each file selector input $(fileInputs).each(function(index, input){ fileList = input.files; // Create a new FormData object. var formData = new FormData(); //Extra parameters can be added to the form data object formData.append('bulk_upload', '1'); formData.append('username', $('input[name="username"]').val()); //Iterate throug each images selected by each file selector and find if the image is present in the preview for (var i = 0; i < fileList.length; i++) { if ($(input).next('.imagePreviewTable').find('.imagePreviewRow_'+i).length != 0) { var file = fileList[i]; // Check the file type. if (!file.type.match('image.*')) { continue; } // Add the file to the request. formData.append('image_uploader_multiple[' +(inputCount++)+ ']', file, file.name); } } // Set up the request. var xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr.onload = function () { if (xhr.status === 200) { var jsonResponse = JSON.parse(xhr.responseText); if (jsonResponse.status == 1) { $(jsonResponse.file_info).each(function(){ //Iterate through response and find data corresponding to each file uploaded var uploaded_file_name = this.original; var saved_file_name = this.target; var file_name_input = '<input type="hidden" class="image_name" name="image_names[]" value="' +saved_file_name+ '" />'; file_info_container.append(file_name_input); imageCount--; }) //Decrement count of inputs to find all images selected by all multi select are uploaded number_of_inputs--; if(number_of_inputs == 0) { //All images selected by each file selector is uploaded //Do necessary acteion post upload $('.overlay').hide(); } } else { if (typeof jsonResponse.error_field_name != 'undefined') { //Do appropriate error action } else { alert(jsonResponse.message); } $('.overlay').hide(); event.preventDefault(); return false; } } else { /*alert('Something went wrong!');*/ $('.overlay').hide(); event.preventDefault(); } }; xhr.send(formData); }) return false; }

qaru.site

Наверное многие сталкивались с вопросом «Как загрузить файл на сервер с помощью JS и JQuery?».
И вероятно не у всех получилось это сделать. На самом деле все не так сложно как кажется.
В данном уроке я опишу процесс загрузки файла на сервер(хостинг) .
Для обмена данными между браузером и веб-сервером, используется технология ajax.
Версия JQuery используемая в рецепте: 2.2.2.

Создаем примитивную разметку из тегов html, head и body.
В теге head необходимо прописать путь до библиотеки jquery.
В примере я использую jquery с сервера google.

 <html>  <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>  </head>  <body>  <body> </html> 

В теге body создаем форму, которая состоит из тега input и button.
С помощью input type=»file» осуществляется выбор файла для загрузки.
Тег button необходим для запуска js кода на передачу файла.

 <form name="uploader" enctype="multipart/form-data" method="POST">  Отправить этот файл: <input name="userfile" type="file" />  <button type="submit" name="submit">Загрузить</button> </form> 

Весь код html и js разметки:

 <html>  <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>  </head>  <body>  <form name="uploader" enctype="multipart/form-data" method="POST">  Отправить этот файл: <input name="userfile" type="file" />  <button type="submit" name="submit">Загрузить</button>  </form>  </body> </html> 

Переходим к java script коду.
Для передачи файла необходимо передавать форму целиком:

$("form[name='uploader']").submit(function(e) {

Считываем данные формы в переменную:

var formData = new FormData($(this)[0]);

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

  $.ajax({  url: 'file.php',  type: "POST",  data: formData,  async: false,  success: function (msg) {  alert(msg);  },  error: function(msg) {  alert('Ошибка!');  },  cache: false,  contentType: false,  processData: false  }); 

Весь код на java script с использование jquery:

  <script type="text/javascript">  $("form[name='uploader']").submit(function(e) {  var formData = new FormData($(this)[0]);   $.ajax({  url: 'file.php',  type: "POST",  data: formData,  async: false,  success: function (msg) {  alert(msg);  },  error: function(msg) {  alert('Ошибка!');  },  cache: false,  contentType: false,  processData: false  });  e.preventDefault();  });  </script> 

Теперь остался код на стороне сервера для приема данных с формы методом POST запроса.

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

$uploaddir = $_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR;

Считываем загружаемый файл:

$uploadfile = $uploaddir . basename($_FILES['userfile']['name']);

Проверяем загружен ли файл.
В соответствии с входящими данными назначаем сопровождающее сообщение.
Если файл не загружен, загружаем в директорию указанную в $uploadfile:

 if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {  $out = "Файл корректен и был успешно загружен.n"; } else {  $out = "Возможная атака с помощью файловой загрузки!n"; } 

При выполнении указанных действий возвращается ответ.

Весь код на php:

 <?php  $uploaddir = $_SERVER['DOCUMENT_ROOT'].DIRECTORY_SEPARATOR.'uploads'.DIRECTORY_SEPARATOR; $uploadfile = $uploaddir . basename($_FILES['userfile']['name']);  if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {  $out = "Файл корректен и был успешно загружен.n"; } else {  $out = "Возможная атака с помощью файловой загрузки!n"; }  echo $out;  ?> 

Весь html код включая js:

 <html>  <head>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>  </head>  <body>  <form name="uploader" enctype="multipart/form-data" method="POST">  Отправить этот файл: <input name="userfile" type="file" />  <button type="submit" name="submit">Загрузить</button>  </form>  <script type="text/javascript">  $("form[name='uploader']").submit(function(e) {  var formData = new FormData($(this)[0]);   $.ajax({  url: 'file.php',  type: "POST",  data: formData,  async: false,  success: function (msg) {  alert(msg);  },  error: function(msg) {  alert('Ошибка!');  },  cache: false,  contentType: false,  processData: false  });  e.preventDefault();  });  </script>  </body> </html> 

Скачать файл с исходным кодом:

Пароль от архива: pacificsky

pacificsky.ru

Я довольно поздно для этого, но я искал решение для загрузки изображений на основе ajax, и ответ, который я искал, был разбросан по всему этому сообщению. Решение, на котором я остановился, включал объект FormData. Я собрал базовую форму кода, который я собрал вместе. Вы можете увидеть, как это демонстрирует, как добавить настраиваемое поле в форму с помощью fd.append (), а также как обрабатывать данные ответа, когда выполняется запрос ajax.

Загрузить html:

<!DOCTYPE html> <html> <head>  <title>Image Upload Form</title>  <script src="//code.jquery.com/jquery-1.9.1.js"></script>  <script type="text/javascript">  function submitForm() {  console.log("submit event");  var fd = new FormData(document.getElementById("fileinfo"));  fd.append("label", "WEBUPLOAD");  $.ajax({  url: "upload.php",  type: "POST",  data: fd,  processData: false, // tell jQuery not to process the data  contentType: false // tell jQuery not to set contentType  }).done(function( data ) {  console.log("PHP Output:");  console.log( data );  });  return false;  }  </script> </head>  <body>  <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">  <label>Select a file:</label><br>  <input type="file" name="file" required />  <input type="submit" value="Upload" />  </form>  <div id="output"></div> </body> </html> 

В случае, если вы работаете с php, это способ обработки загрузки, включающий использование обоих настраиваемых полей, показанных в приведенном выше html.

upload.php

<?php if ($_POST["label"]) {  $label = $_POST["label"]; } $allowedExts = array("gif", "jpeg", "jpg", "png"); $temp = explode(".", $_FILES["file"]["name"]); $extension = end($temp); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/pjpeg") || ($_FILES["file"]["type"] == "image/x-png") || ($_FILES["file"]["type"] == "image/png")) && ($_FILES["file"]["size"] < 200000) && in_array($extension, $allowedExts)) {  if ($_FILES["file"]["error"] > 0) {  echo "Return Code: " . $_FILES["file"]["error"] . "<br>";  } else {  $filename = $label.$_FILES["file"]["name"];  echo "Upload: " . $_FILES["file"]["name"] . "<br>";  echo "Type: " . $_FILES["file"]["type"] . "<br>";  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";  echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";   if (file_exists("uploads/" . $filename)) {  echo $filename . " already exists. ";  } else {  move_uploaded_file($_FILES["file"]["tmp_name"],  "uploads/" . $filename);  echo "Stored in: " . "uploads/" . $filename;  }  } } else {  echo "Invalid file"; } ?> 

code-examples.net

Добрый день!

Долгое время на просторах интернета я искал информацию о реализации 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

1. HTML и CSS

Как обычно, всё начинается с создания стандартного HTML5-документа и таблицы стилей:

<!DOCTYPE html> <html>   <head>  <meta charset="utf-8"/>  <title>Mini Ajax File Upload Form</title>   <!-- Google web fonts -->  <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />   <!-- CSS -->  <link href="css/style.css" rel="stylesheet" />  </head>   <body>   <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">  <div id="drop">  Drop Here   <a>Обзор</a>  <input type="file" name="upl" multiple />  </div>   <ul>  <!-- Загруженные файлы будут отображаться здесь -->  </ul>   </form>   <!-- JavaScript -->  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <script src="js/jquery.knob.js"></script>   <!-- jQuery File Upload Dependencies -->  <script src="js/jquery.ui.widget.js"></script>  <script src="js/jquery.iframe-transport.js"></script>  <script src="js/jquery.fileupload.js"></script>   <!-- Основной файл JS -->  <script src="js/script.js"></script>   </body> </html>

В секции документа я подключил два шрифта Google Webfonts, а перед закрывающим тегом </body> вы можете увидеть несколько JavaScript-библиотек: jQuery, jQuery Knob plugin, jQuery File Upload plugin и зависимые от него библиотеки.

/*-------------------------  Simple reset --------------------------*/  *{  margin:0;  padding:0; }  /*-------------------------  General Styles --------------------------*/  html{  background-color:#ebebec;   background-image:-webkit-radial-gradient(center, #ebebec, #b4b4b4);  background-image:-moz-radial-gradient(center, #ebebec, #b4b4b4);  background-image:radial-gradient(center, #ebebec, #b4b4b4);   min-height:900px; }  body{  font:15px/1.3 Arial, sans-serif;  color: #4f4f4f; }  a, a:visited {  outline:none;  color:#389dc1; }  a:hover{  text-decoration:none; }  section, footer, header, aside{  display: block; }  /*----------------------------  The file upload form -----------------------------*/  #upload{  font-family:'PT Sans Narrow', sans-serif;  background-color:#373a3d;   background-image:-webkit-linear-gradient(top, #373a3d, #313437);  background-image:-moz-linear-gradient(top, #373a3d, #313437);  background-image:linear-gradient(top, #373a3d, #313437);   width:250px;  padding:30px;  border-radius:3px;   margin:200px auto 100px;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }  #drop{  background-color: #2E3134;  padding: 40px 50px;  margin-bottom: 30px;  border: 20px solid rgba(0, 0, 0, 0);  border-radius: 3px;  border-image: url('../img/border-image.png') 25 repeat;  text-align: center;  text-transform: uppercase;   font-size:16px;  font-weight:bold;  color:#7f858a; }  #drop a{  background-color:#007a96;  padding:12px 26px;  color:#fff;  font-size:14px;  border-radius:2px;  cursor:pointer;  display:inline-block;  margin-top:12px;  line-height:1; }  #drop a:hover{  background-color:#0986a3; }  #drop input{  display:none; }  #upload ul{  list-style:none;  margin:0 -30px;  border-top:1px solid #2b2e31;  border-bottom:1px solid #3d4043; }  #upload ul li{   background-color:#333639;   background-image:-webkit-linear-gradient(top, #333639, #303335);  background-image:-moz-linear-gradient(top, #333639, #303335);  background-image:linear-gradient(top, #333639, #303335);   border-top:1px solid #3d4043;  border-bottom:1px solid #2b2e31;  padding:15px;  height: 52px;   position: relative; }  #upload ul li input{  display: none; }  #upload ul li p{  width: 144px;  overflow: hidden;  white-space: nowrap;  color: #EEE;  font-size: 16px;  font-weight: bold;  position: absolute;  top: 20px;  left: 100px; }  #upload ul li i{  font-weight: normal;  font-style:normal;  color:#7f7f7f;  display:block; }  #upload ul li canvas{  top: 15px;  left: 32px;  position: absolute; }  #upload ul li span{  width: 15px;  height: 12px;  background: url('../img/icons.png') no-repeat;  position: absolute;  top: 34px;  right: 33px;  cursor:pointer; }  #upload ul li.working span{  height: 16px;  background-position: 0 -12px; }  #upload ul li.error p{  color:red; }

Основным элементом страницы является форма #upload. Внутри формы расположен div с id #drop (используется для drag-and-drop) и маркированный список. Каждый элемент этого списка будет содержать информацию о каждом загруженном файле и будет выглядеть примерно так:

<li class="working">  <input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />  <p>Sunset.jpg <i>145 KB</i></p>  <span></span> </li>

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

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


2. jQuery

Выбор и загрузка файлов осуществляется двумя способами:

  • Простым перетаскиванием файлов на div#drop (кроме IE);
  • Нажатимем на кнопку “Обзор” (“Browse”). Нажатие имитирует клик по скрытому полю <input>, которое открывает диалог выбора файлов в системе. Заметьте, скрытое поле имеет параметр multiple, что позволяет выбрать сразу несколько файлов для загрузки, при этом каждый файл всё равно будет закачан по отдельности.

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

Файл script.js:

$(function(){   var ul = $('#upload ul');   $('#drop a').click(function(){  // Имитация клика по input  $(this).parent().find('input').click();  });   // Инициализация jQuery File Upload plugin  $('#upload').fileupload({   // Контейнер для drag-and-drop  dropZone: $('#drop'),   // Функция, вызываемая после выбора файла  add: function (e, data) {   var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+  ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');   // Добавляем имя файла и его размер  tpl.find('p').text(data.files[0].name)  .append('<i>' + formatFileSize(data.files[0].size) + '</i>');   // Добавляем описание файлв в список загрузок  data.context = tpl.appendTo(ul);   // Инициализируем Knob plugin  tpl.find('input').knob();   // Отслеживание кликов по кнопке отмены  tpl.find('span').click(function(){   if(tpl.hasClass('working')){  jqXHR.abort();  }   tpl.fadeOut(function(){  tpl.remove();  });   });   // Автоматическая загрузка файла после его добавления  var jqXHR = data.submit();  },   progress: function(e, data){   // Высчитываем статус загрузки  var progress = parseInt(data.loaded / data.total * 100, 10);   // Обновляем скрытый input  data.context.find('input').val(progress).change();   if(progress == 100){  data.context.removeClass('working');  }  },   fail:function(e, data){  // Ошибка  data.context.addClass('error');  }   });   // Отмена стандартного действия брацзера, если выполнено действие drop  $(document).on('drop dragover', function (e) {  e.preventDefault();  });   // Вспомогательная функция для переода размера файла в другие велечины  function formatFileSize(bytes) {  if (typeof bytes !== 'number') {  return '';  }   if (bytes >= 1000000000) {  return (bytes / 1000000000).toFixed(2) + ' GB';  }   if (bytes >= 1000000) {  return (bytes / 1000000).toFixed(2) + ' MB';  }   return (bytes / 1000).toFixed(2) + ' KB';  }  });

Плагин jQuery File Upload поставляется с собственным UI-интерфейсом загрузки, однако, поскольку нам необходимо сделать полностью другой интерфейс, мы будем использовать базовую версию плагина, которая не включает в себя никакого интерфейса. Чтобы заставить всё это работать, мы передадим в функцию несколько параметров:

  • dropZone — селектор, определяющий элемент, который будет реагировать на событие drag/drop. Файлы, перемещённые сюда, будут добавлены в очередь загрузки.
  • add — callback-функция, вызываемая после добавления файлов в очередь. Внутри неё мы создадим HTML-представление файла, которое будет добавляться в наш маркированный список UL, а так же вызывать метод data.submit() для немедленной загрузки файла.
  • progress — callback-функция, вызываемая каждые 100мс (настраивается). Второй аргумент (data) хранит в себе размер файла и количество переданных байт. Это позволит нам отслеживать статус загрузки файла в процентном соотношении.
  • fail — callback-функция, вызываемая при возникновении проблем на стороне сервера, например, отсутствие PHP скрипта или ошибка в нём.

Полный список возможных параметров можно посмотреть здесь.


3. PHP

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

<?php  // Разрешённые для загрузки файлы $allowed = array('png', 'jpg', 'gif','zip');  if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){   $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);   if(!in_array(strtolower($extension), $allowed)){  echo '{"status":"error"}';  exit;  }   if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){  echo '{"status":"success"}';  exit;  } }  echo '{"status":"error"}'; exit;

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


Вот и всё!

Надеюсь, этот урок был для вас полезным. Если вы используете какой-то другой способ загрузки файлов средствами ajax, пожалуйста, поделитесь им с нами — думаю, всем будет интересно.

 

P.S. Скачать демо-пример со всеми стилями и скриптами можно здесь.

tutsday.ru

UPD:

Если кому захочется добавить красоты, например прогресс бар, то для этого нам надо будет дописать несколько строк кода. В html шаблон мы добавим супер элемент из html5 – progress, а в js код, добавим несколько строк с объектом XMLHttpRequest.
И так, наш html дополнится следующим:

  <progress></progress>   

А в код js допишем:

  function progressHandlingFunction(e){   if(e.lengthComputable){   $('progress').attr({value:e.loaded,max:e.total});   }  }  

и

  xhr: function() {    var myXhr = $.ajaxSettings.xhr();   if(myXhr.upload){ // проверка что осуществляется upload   myXhr.upload.addEventListener('progress',progressHandlingFunction, false); //передача в функцию значений  }   return myXhr;  }  

Финальный результат js кода:

  <script>    $(document).ready(function(){  	  function progressHandlingFunction(e){   if(e.lengthComputable){   $('progress').attr({value:e.loaded,max:e.total});   }  }  	  	$('#preloader').hide();  	$('#file').bind('change', function(){  	var data = new FormData();  var error = '';	  	jQuery.each($('#file')[0].files, function(i, file) {  		   if(file.name.length < 1) {   	error = error + ' Файл имеет неправильный размер! ';	   }   if(file.size > 1000000) {   error = error + ' File ' + file.name + ' is to big.';   }   if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {   error = error + 'File ' + file.name + ' doesnt match png, jpg or gif';   }  	   	 data.append('file-'+i, file);    	});    if (error != '') {$('#info').html(error);} else {  		  		$.ajax({  		 url: 'productUploadImg.php',  		 type: 'POST',  				xhr: function() {   	 var myXhr = $.ajaxSettings.xhr();  	 if(myXhr.upload){ // проверка что осуществляется upload  	 myXhr.upload.addEventListener('progress',progressHandlingFunction, false); //передача в функцию значений  	 }  	 return myXhr;  	 	},  		 data: data,  		 cache: false,  		 contentType: false,  		 processData: false,  		   		 beforeSend: function() {   		 $('#preloader').show();	   			},   			  		 success: function(data){  		 $('#info').html(data);  		 $('#preloader').hide();  		   		 }  		   		 ,   error: errorHandler = function() {   $('#info').html('Ошибка загрузки файлов');   }    		});  		  		}  	})    });    </script>  

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

labdes.ru


You May Also Like

About the Author: admind

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

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

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

Adblock
detector