Загрузка файлов ajax


В этом уроке у нас в плане форма загрузки файла, которая позволит посетителям загружать файлы простым перетаскиванием их в окно браузера или же выбрав их, нажав на кнопку “Загрузить”.

Для этой цели мы будем использовать комбинацию jQuery File Upload плагина с изящным jQuery Knob современным интерфейсом на основе CSS3 & JS. В итоге у Вас будет ajax загрузка файлов, без перезагрузки страницы, и с отличным дизайном.

HTML

Как обычно, начнем с основного документа – разметки html5. Весь документ имеет следующий вид:

В заголовке документа, мы подключаем два шрифта WebFonts Google (их подключение не является обязательным, если хотите, можете поменять шрифт). Перед закрывающим тегом body Вы можете видеть ряд JavaScript скриптов. Это библиотека JQuery, плагин и плагин .

Основным элементом на странице, является форма #upload. Внутри неё #drop


(который является областью, при перетаскивании на которую, начинается загрузка файла) и неупорядоченный список ul. Этот список будет содержать все загруженные файлы, их состояние. Ниже Вы можете увидеть разметку, созданную для загрузки файла:

Элемент input в приведенном выше отрывке скрыт через CSS. Его единственное назначение состоит в инициализации JQuery плагина Knob и вывод красивого “значка” загрузки.

Также он имеет ряд атрибутов data-*, которые изменяют внешний вид “значка” загрузки. Тег span содержит значок справа – это может быть либо галочка или красный крест.

ajax форма загрузки файла

JQuery код

Есть два способа, с помощью которых пользователь может загрузить файлы:

  • Перетащить файл в браузер, внутрь элемента #drop;
  • Нажав на кнопку "Загрузить". Это будет имитировать нажатие на скрытый input file, системное окно просмотра файлов на компьютере. Обратите внимание, input имеет несколько параметров, что позволяет загружать сразу несколько файлов, просто выделив их (но файлы все равно будут загружены каждый индивидуально!).

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

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

Для работы формы загрузки файлов, мы передаем несколько конфигураций / обратных вызовов, а именно:


  • dropZone – это свойство содержит JQuery селектор элемента, который будет выступать в качестве области для перетаскивания. Файлы, которые попали на него будут добавлены в очередь на загрузку.
  • add – эта функция обратного вызова вызывается при добавлении файла в очередь. Внутри него, мы создаем HTML разметку, которая будет представлять файл, добавлять его в список ul и вызывать data.submit (). Это приведет к прямой загрузке файлов, без ожидания.
  • progress – этот обратный вызов выполняется с помощью плагина каждые 100 мс (настраивается). Второй аргумент (данные атрибутов) содержит размер файла и сколько байт было загружено. Это позволяет рассчитать процент, а затем обновить скрытый элемент input, который в свою очередь, обновляет “значок” статуса загрузки.
  • fail – эта функция обратного вызова выполняется, если есть проблемы с Вашим PHP скриптом. Это, скорее всего, означает, что файл upload.php отсутствует или есть какая-то ошибка (используйте инспектор веб-браузера для настройки любых потенциальных проблем).

Свойство data.context сохраняется между вызовами этого плагина. Таким образом, мы знаем, какой li пункт, на какой стадии загрузки.

PHP скрипт

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

Загрузка файлов отправляется практически так же, как регулярная форма загрузки – Вы можете получить доступ к информации о добавлении через массив $ _FILES:

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

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

Готово. Мы сделали!

Я надеюсь, что эта ajax загрузка файлов оказалась для вас полезной! Желаю успехов! ;)

vladmaxi.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

Кратко о 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 форму для загрузки файлов, которая позволит посетителям загружать файлы с помощью технологии drag/drop или при помощи обычного выбора файлов.

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

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

HTML

Как обычно, начнем с 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' />     <!-- The main CSS file -->   <link href="assets/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>Browse</a>   <input type="file" name="upl" multiple />   </div>     <ul>   <!-- загрузки будут показаны здесь -->   </ul>     </form>     <!-- JavaScript Includes -->   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   <script src="assets/js/jquery.knob.js"></script>     <!-- jQuery File Upload Dependencies -->   <script src="assets/js/jquery.ui.widget.js"></script>   <script src="assets/js/jquery.iframe-transport.js"></script>   <script src="assets/js/jquery.fileupload.js"></script>     <!-- main JS file -->   <script src="assets/js/script.js"></script>     </body>  </html>  

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

Главный элемент страницы — форма #upload. Внутри нее элемент #drop (принимает файлы с использованием drag&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, который будет рисовать шкалу процесса загрузки файла.  Input имеет атрибуты data-*, которые используются для обновления шкалы. Позже, когда мы будет отслеживать прогресс загрузки, мы будем обновлять эти значения для перерисовки шкалы. span будет содержать зеленую галку или красный крест.

jQuery

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

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

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

  $(function(){     var ul = $('#upload ul');     $('#drop a').click(function(){   // имитация нажатия на поле выбора файла   $(this).parent().find('input').click();   });     // инициализация плагина jQuery File Upload   $('#upload').fileupload({     // этот элемент будет принимать перетаскиваемые на него файлы   dropZone: $('#drop'),     // Функция будет вызвана при помещении файла в очередь   add: function (e, data) {     var tpl = $('<li><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);     // инициализация плагина jQuery Knob   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);     // обновляем шкалу   data.context.find('input').val(progress).change();     if(progress == 100){   data.context.removeClass('working');   }   },     fail:function(e, data){   // что-то пошло не так   data.context.addClass('error');   }     });     $(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 есть собственный интерфейс, но мы используем базовую версию плагина для создания собственного дизайна интерфейса. И чтобы наш интерфейс работал, мы передаем плагину несколько параметров / колбэков:

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

easy-code.ru

Речь пойдёт об одном из готовых инструментов под названием AJAX File-Uploader версии 2.0, которое если и не использовать при возникновении необходимости загрузки файлов, то уж точно добавить к себе в закладки. Почему именно этот плагин? Я, наверно, перебрал уже немало вариантов и сохранил столько же ссылок у себя на ПК, где рассматриваются различные решения, и каждое из них имеет право на существование, но этот плагин после подробного его исследования мне показался максимально удобным и универсальным.

Что же он может делать?

С одной стороны смешной вопрос, естественно загружать файлы! Но давайте рассмотрим отличительные его черты и возможности:

  • Плагин поддерживает Multiple функционал;
  • Есть собственный прогрессбар из коробки;
  • Поддерживает возможность Drag-and-drop;
  • Процесс загрузки отменяемый;
  • Довольно важная особенность – не использует Flash;
  • Работает во всех современных браузерах, а, что касается IE, то сам лично проверял – поддерживает начиная с 7 версии.

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

Если у вас медиаресурс или вы просто захотели добавить возможность пользователям загружать файлы, то, как это в основном происходит: пользователь кликает по кнопке загрузить, выбрав картинку, и ожидает какого-то результата -> в это время его картинка попадает на сервер, где что-то с ней делаем уже мы. Да это очень-очень упрощённая схема загрузки, но, тут важно, что весь процесс можно разделить на два этапа: визуальная часть и серверная часть. В этой статье мы и рассмотрим эту цепочку на примере, который вы можете изучить в демо, прикреплённом к этой статье.

В самом начале работы с плагином нам необходимо подключить следующие файлы:

<link href="main.css" type="text/css" rel="stylesheet" />  <link href="fileuploader.css" type="text/css" rel="stylesheet" />  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <script src="fileuploader.js" type="text/javascript"></script>

Данное решение написано на JavaScript и не использует сторонних библиотек. jQuery я подключил для собственного удобства, а в файле стилей main – мы будем добавлять свои CSS правела, чтобы не затронуть стили которые нам предоставляют разработчики.

Теперь мы добавим HTML разметку:

<div id="file-uploader">  	<noscript>  		<p>  			Пожалуйста, включите JavaScript, чтобы использовать загрузчик файлов.  		</p>  	</noscript>  </div>

Если вы не ориентируетесь на людей, которые не используют JavaScript, то элемент noscript и его содержимое можно не писать.

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

<div id="file-logs">  </div>

Закончив с подготовительными делами, переходим непосредственно к работе со скриптом, который поместим в стандартную jQuery обёртку.

$(function(){    	/*  		Весь JavaScript  		добавляем сюда  	*/  });

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

function templateLogsHtml(element, title, type, args){    	var templateHtml = "",  	 argsHtml 	 = "";    	for(var key in args){    		if(typeof(args[key]) == "object"){    			for(var k in args[key]){    				argsHtml += "<b>" + k + " - " + args[key][k] + "</b>";  			};  		}else{  			argsHtml += key + " - " + args[key] + "<br />";  		};  	};    	templateHtml = "<p class='" + type + "'>";  	templateHtml 	+= "<span>" + title + ":</span>";  	templateHtml 	+= argsHtml;  	templateHtml += "</p>";    	element.prepend(templateHtml);    	return false;  };

Функция templateLogsHtml() представляет собой простейший шаблонизатор для вывода наших логов для различных событий. Рассмотрим принимаемые ею параметры:

  • element – блок в который мы будем выводить логи;
  • title – заголовок события;
  • type – тип события;
  • args – аргументы события.

Теперь я добавлю сам код уже настроенного загрузчика, а ниже под ним опишу все его составляющие:

var fileLogs = $("#file-logs");    var uploader = new qq.FileUploader({  	element: $("#file-uploader")[0],  	action: "server.php",  	allowedExtensions: ["jpg", "jpeg", "png", "gif", "ico"],  	sizeLimit: 51200,  	multiple: 5,  	inputName: "qqFile",  	onSubmit: function(fileId, fileName){    		templateLogsHtml(fileLogs, "Нажатие на кнопку", "onSubmit", {    			ID: fileId,  			NAME: fileName  		});  	},  	onCancel: function(fileId, fileName){    		templateLogsHtml(fileLogs, "Отмена загрузки", "onCancel", {    			ID: fileId,  			NAME: fileName  		});  	},  	onComplete: function(fileId, fileName, responseJSON){    		templateLogsHtml(fileLogs, "Ответ сервера", "onComplete", {    			ID: fileId,  			NAME: fileName,  			RESPONSE: responseJSON  		});  	},  	messages: {    		typeError: "Допустимые форматы для загрузки: {extensions}",  		sizeError: "Файл {file} слишком большой, Вы превысили допустимый размер {sizeLimit}"  	},  	showMessage: function(message){    		templateLogsHtml(fileLogs, "Вывод сообщения об ошибке", "showMessage", {    			MESSAGE: message  		});  	},  	dragText: "Переместите файл сюда чтобы загрузить",  	uploadButtonText: "Загрузить файл",  	cancelButtonText: "Отмена",  	failUploadText: "Файл не загрузился"  });

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

  • element – узел DOM дерева в нашем случае <div id="file-uploader">;
  • action – путь до скрипта обработчика;
  • allowedExtensions – массив с форматами файлов допускаемых для загрузки;
  • sizeLimit – минимальный размер файла в байтах;
  • multiple – число файлов загружаемых за раз, если нужен только один указываем в значении !1;
  • inputName – значение параметра name у input через который будет осуществляться загрузка;
  • onSubmit – callback функция которая вызывается при нажатии на кнопку загрузки;
  • onCancel – callback функция вызываемая при отмене;
  • onComplete – callback функция при вызываемая при удачном завершении загрузки файла;
  • messages – сообщения ошибок;
  • showMessage – callback функция при помощи которой мы можем вывести ошибки на экран;
  • dragText – текст на области Drag-and-drop;
  • uploadButtonText – текст на кнопке загрузки;
  • cancelButtonText – текст кнопки отмены;
  • failUploadText – текст при не удачной загрузке.

Но это далеко не все параметры, которые можно использовать — их гораздо больше! С другими вы можете ознакомиться, воспользовавшись поиском по самой библиотеке.

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

Теперь давайте перейдём к серверу и разберемся, как мы будем обрабатывать данные. Если перейти на сайт разработчиков, ссылку вы найдёте в низу страницы и скачать там архив с плагином, то в нём будет готовый PHP сервер. Из себя он представляет файл с тремя классами. После его рассмотрения, я его немного подправил под себя. Конечно изменения не существенные, но есть, поэтому я буду отталкиваться от моего варианта.

Чтобы добиться большей кроссбраузерности разработчики AJAX File-Uploader версии 2.0 воспользовались двумя способами загрузки, а именно через ajax и через форму. Зависимости от поддерживаемого метода браузером подключается тот или иной способ. Такая же ситуация и на сервере, у нас — три класса UploaderFileByXhr, UploaderFileByForm, Uploader. Первый и второй отвечают каждый за свой способ загрузки, а третий используется для подключения одного из вариантов, а также обработки принимаемых параметров и проверки загрузки файла.

class UploaderFileByXhr{    	private $name;    	public function __construct($name){    		$this->name = $name;    		return false;  	}    	public function save($path){    		$input = fopen("php://input", "r");  		$temp = tmpfile();  		$real_size = stream_copy_to_stream($input, $temp);  		fclose($input);    		if($real_size != $this->get_size()){    			return false;  		}    		$target = fopen($path, "w");  		fseek($temp, 0, SEEK_SET);  		stream_copy_to_stream($temp, $target);  		fclose($target);    		return true;  	}    	public function get_size(){    		if(isset($_SERVER["CONTENT_LENGTH"])){    			return (int)$_SERVER["CONTENT_LENGTH"];  		}    		return false;  	}    	public function get_name(){    		return $_GET[$this->name];  	}  }
class UploaderFileByForm{    	private $name;    	public function __construct($name){    		$this->name = $name;    		return false;  	}    	public function save($path){    		if(!move_uploaded_file($_FILES[$this->name]["tmp_name"], $path)){    			return false;  		}    		return true;  	}    	public function get_size(){    		return $_FILES[$this->name]["size"];  	}    	public function get_name(){    		return $_FILES[$this->name]["name"];  	}  }
class Uploader{    	private $file;  	private $formats;  	private $max_size;    	public function __construct($params = array()){    		if(isset($params["file"]) && $params["file"]){    			if(isset($_GET[$params["file"]])){  				$this->file = new UploaderFileByXhr(  					$params["file"]  				);  			}elseif(isset($_FILES[$params["file"]])){  				$this->file = new UploaderFileByForm(  					$params["file"]  				);  			}else{  				$this->file = false;  			}  		}    		if(isset($params["formats"]) && $params["formats"]){    			$this->formats = strtolower($params["formats"]);  		}    		if(isset($params["max_size"]) && $params["max_size"]){    			$this->max_size = (int)$params["max_size"];  		}    		return false;  	}    	public function upload_file($path, $file_name){    		if(!is_writable($path)){    			return array(  				"error" => "Ошибка сервера, невозможно загрузить в папку"  			);  		}    		if(!$this->file){    			return array(  				"error" => "Файл не был загружен"  			);  		}    		$size = $this->file->get_size();  		if($size == 0){    			return array(  				"error" => "Файл пуст"  			);  		}  		if($size > $this->max_size){    			return array(  				"error" => "Файл слишком большой"  			);  		}    		$path_info = pathinfo($this->file->get_name());  		$ext 	 = @strtolower($path_info["extension"]);  		$valid_ext = explode("|", $this->formats);  		if($this->formats && !in_array($ext, $valid_ext)){    			$these = implode(", ", $valid_ext);  			return array(  				"error" => "Допустимые форматы для загрузки: ".$these  			);  		}    		if($this->file->save($path.$file_name.".".$ext)){    			return array(  				"success" => true  			);  		}    		return array(  			"error" => "Файл не был загружен или отменён"  		);  	}  }

Для загрузки файла на сервер необходимо создать экземпляр объекта Uploader с переданными в него параметрами:

  • file – название атрибута name, который был рассмотрен выше;
  • formats – форматы файлов допускаемые для загрузки;
  • max_size – максимальный размер файла.
$obj = new Uploader(array(  	"file"	 => "qqFile",  	"formats" => "jpg|jpeg|png|gif|ico",  	"max_size" => 51200  ));

А теперь останется воспользоваться методом upload_file():

echo(json_encode(  	$obj->upload_file("uploads/", "newName")  ));

Данный метод принимает два параметра:

  • Папка, в которую нужно сохранить файл;
  • Имя добавленного файла.

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

И так, подведём итог разбора плагина AJAX File-Uploader версии 2.0: это довольно хорошие и удобное решение для загрузки файлов, которое универсально и кроссбраузерно, в большинстве случаев оно будет лучшим выбором для загрузки файлов и картинок, но недостаток – обладает значительным размером.

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

falbar.ru

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.preventDefault(); // Полная остановка происходящего    	// Создадим данные формы и добавим в них данные файлов из files    	var data = new FormData();  	$.each( files, function( key, value ){  		data.append( key, value );  	});    	// Отправляем запрос    	$.ajax({  		url: './submit.php?uploadfiles',  		type: 'POST',  		data: data,  		cache: false,  		dataType: 'json',  		processData: false, // Не обрабатываем файлы (Don't process the files)  		contentType: false, // Так jQuery скажет серверу что это строковой запрос  		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-запросом. Теперь пришло время поговорить о том, как же можно загружать файлы с помощью AJAX. Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс. Но оглядываться назад не будем, посему шагаем в ногу со временем.

Рассмотрим, на мой взгляд, один из самых удобных способов для работы с файлами (и не только) — объект FormData. Пусть будет такая простенькая форма, для загрузки аватара пользователя:

HTML (файл index.html)

<form action="handler.php" method="post" id="my_form" enctype="multipart/form-data">   <label for="fio">Ф.И.О:</label>   <input type="text" name="fio" id="fio"><br>   <label for="avatar">Аватар:</label>   <input type="file" name="avatar" id="avatar"><br>   <input type="submit" id="submit" value="Отправить">  </form>

Перейдем к JS-части. С полем «Ф.И.О» сложностей не будет и его используем только для наглядности того, что вместе с файлом, мы можем отправлять любые другие данные.

jQuery (файл script.js)

$(function(){   $('#my_form').on('submit', function(e){   e.preventDefault();   var $that = $(this),   formData = new FormData($that.get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму (*)   $.ajax({   url: $that.attr('action'),   type: $that.attr('method'),   contentType: false, // важно - убираем форматирование данных по умолчанию   processData: false, // важно - убираем преобразование строк по умолчанию   data: formData,   dataType: 'json',   success: function(json){   	if(json){   $that.replaceWith(json);   }   }   });   });  });

(*)Обратите внимание на то, что передаем форму не объектом jQuery, а DOM-элемент

PHP-обработчик (файл handler.php)

<?php  if(isset($_POST['fio'],$_FILES['avatar'])){   $req = false; // изначально переменная для "ответа" - false   // Приведём полученную информацию в удобочитаемый вид   ob_start();   echo '<pre>';   echo 'Имя пользователя: <strong>' , $_POST['fio'] , '</strong><br>Данные загруженного файла:<br>';	   print_r($_FILES['avatar']);   echo '</pre>';   $req = ob_get_contents();   ob_end_clean();   echo json_encode($req); // вернем полученное в ответе   exit;  }

Если всё было сделано правильно, то на экране нам выведится информация в таком виде:

  Имя пользователя: Alex  Данные загруженного файла:  Array  (   [name] => avatar.jpg   [type] => image/jpeg   [tmp_name] => E:OpenServeruserdatatempphp8627.tmp   [error] => 0   [size] => 6697  )

Ясное дело, что выводить эту информацию нам не потребуется, а нужно будет сохранять файл на сервере, указав ему место "постоянной прописки" ;). Как загружать/сохранять файлы средствами php, я описывать тут не буду, т.к. тема не маленькая и ей можно посветить отдельную статью. Для самых нетерпеливых, могу дать пару намёков — используем: move_uploaded_file(), getimagesize(), Fileinfo и другие полезные функции. И не забывайте, что очень желательно задавать файлам уникальные имена, т.к. при совпадении имён и расширений, старый файл будет попросту перезаписан новым.

"Замечтательно! — скажите вы. — А как же быть, если нужно загрузить несколько файлов одновременно?" Ничего сверхъестественного и существует несколько способов реализации:

  1. Используем атрибут multiple (в нашем случае, позволяет для одного поля input указывать несколько файлов). Добавляем этот атрибут в наше поле и изменяем его имя, добавив квадратные скобки «[]». Это укажет, что мы передаем массив данных из этого поля:
    <input type="file" name="avatar[]" id="avatar" multiple>

    Способ хороший, но к сожалению не все браузеры с ним дружат.

  2. Заранее подготовить несколько полей, которым так же можно указать одинаковые имена массивом:
    <input type="file" name="avatar[]"> <input type="file" name="avatar[]">

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

  3. Динамическое добавление полей. Тут мы создаем одно поле и добавляем какую-нибуть кнопку, по нажатию на которую, пользователь сможет добавлять необходимое кол-во дополнительный полей. Каким способом добавлять поля — дело вашего вкуса и фантазии. Можно заранее подготовить код поля в JS, присвоив его переменной, можно клонировать уже существующий элемент — clone() и т.д.

Во всех трёх вариантах, на стороне сервера, мы получим массив файлов и, как с любым другим массивом, обрабатываем его в цикле.

Ещё одним моментом, который сто́ит затронуть — это добавление файлов (и других данных) в FormData, если формы, как таковой, нету или данные берутся из других источников. Для этой задачи, будем использовать метод append(), который похож на jQuery-метод append(), но выполняет немного другой функционал. Синтаксис метода:

void append(DOMString name, File value, optional DOMString filename);  void append(DOMString name, Blob value, optional DOMString filename);  void append(DOMString name, DOMString value);

Где параметры:

name
Имя поля, данные которого передаются в параметре value. По сути, если мы взяли данные не из поля формы, у которого есть атрибут name, то мы этот name задаём сами.
value
Значение поля. Может быть типа Blob, File или string
filename
Необязательный параметр. Для типов Blob и File — имя файла, сообщаемое серверу

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

$(function(){   $('#my_form').on('submit', function(e){   e.preventDefault();   var $that = $(this),   formData = new FormData($that.get(0));   formData.append('date_upl', new Date()); // добавляем данные, не относящиеся к форме. У нас - это дата   $.ajax({   url: $that.attr('action'),   type: $that.attr('method'),   contentType: false,   processData: false,   data: formData,   dataType: 'json',   success: function(json){   	if(json){   $that.replaceWith(json);   }   }   });   });  });

Вуаля, собственно новые данные добавлены к набору передавемых на сервер. Наша дата будет в переменной $_POST[‘date_upl’]. Для добавления еще одной и более пары «ключ — значение», используем ту же конструкцию. С файлами дело обстоит так же, но нужно учитывать, что значением является DOM-элемент, а не объект jQuery. И напомню, что абсолютно все данные, приходящие от клиента, должны в обязательном порядке подвергаться проверке, фильтрации, валидации и т.д.!


На этом можно было бы поставить многоточие, но не точку, т.к. тема обширна и всегда будут обстоятельства, которые потребуют нестандартных путей решения. Осталось еще пара небольших вопросов, которые относятся к данной теме, но я решил их вынести в отдельные статьи. Непосредственно по теме загрузки файлов — создание прогрессбара (индикатора выполнения загрузки на сервер) и Ajax на чистом (нативном) JS, без использования фреймворков.

incode.pro

Вступление

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

загрузчик файлов ajax

пример загрузчика файлов ajax

Шаг 1: разметка HTML

Начните с создания документа html и определения формы, которая будет использоваться для загрузчика файлов. Сохраните его как index.html.

Начинаем свой документ html с добавления обычных doctype, html, тэгов head и body. В head добавляем заголовок, ссылку на таблицу стилей, ссылку на Google jQuery CDN и свой плагин Ajax. Второй тэг script находится там, куда мы будем помещать весь код после того, как документ будет готов.

Внутри body делаем разметку своей страницы при помощи div‘а #file_holder, который станет нашим упаковщиком, формой и нескриптовой кнопкой submit (отправить), которая поможет сохранить юзабилити (простоту и доступность использования), если у пользователя в браузере не включен javascript, ввод загрузчика файлов и два div’а, которые будут содержать изображение загрузки, а также сообщения об ошибках.

Браузер с отключенным javascript

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

Зависимые файлы

Для изображения загрузки я применил «указатели-стрелки» (arrows) из http://www.ajaxload.info/.
Выберите то изображение, которое вам нравится, сохраните его как ajax-loader.gif и выгрузите на свой сервер.

Нам также понадобится плагин Ajax upload. Сохраните его как ajaxupload.js и выгрузите на сервер в папку с названием "ajax".

Шаг 2: стили CSS

Для функциональности этой простой формы требуется всего три строки стилей, скрытие div’а loading на странице загрузки, и расцвечивание текста сообщений об успешном выполнении и ошибке. Конечно, вы можете все улучшить и сделать красивее, чем в моем простом примере загрузчика. Сохраните как style.css.

Шаг 3: Javascript

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

Мы начинаем назначение переменных своего загрузчика Ajax, во-первых, с установки ввода #userfile как переменной загрузки, а затем назначаем действие, с которого начинает действовать ввод, когда выбирается файл.

Вышеприведенный фрагмент говорит загрузчику что делать, как только файл выбран из нашего файлового ввода. Во-первых, показывается анимация загрузки, пока проверяется расширение файла. Если расширение файла не совпадает с предопределенными, выгрузка останавливается и пользователю показывается сообщение об ошибке. Как только пользователь предпринимает новую попытку с правильным расширением файла, сообщение об ошибке убирается, и данные файла предаются в файл upload.php при помощи команды setData.

Как только наш файл передается в upload.php, до которого мы скоро доберемся, изображение загрузки скрывается и, при помощи захвата статуса из iframe, создаваемого плагином ajaxupload, показывается сообщение об успешном выполнении или ошибке.

Скрипт целиком

Скопируйте и вставьте весь этот код в раздел head своего документа.

Шаг 4: PHP

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

Хотя многое тут и так понятно, я поясню, что выполняет все вышеприведенное.

Переменная $max_filesize определяет максимальный размер разрешенного для выгрузки файла, в данный момент она установлена на 2mb (так по умолчанию выставляют свои серверы большинство хостинг-провайдеров), определенные в байтах.

Переменная $filename получает из ввода #userfile название файла целиком, включая расширение.
Переменная $ext проверяет правильность расширения на соответствие массиву $allowed_filetypes.

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

$file_strip замещает любые пробелы в названии файла подчеркиваниями, зачем? Если имя файла используется в url, таком как ссылка на изображение и т.д., пробелы часто замещаются на 20% созданием адреса sloppy и его сложно индексировать поисковикам.

Наконец, $upload_path определяет папку, в которую будут перемещаться выгрузки, соответствующую домашней на вашем сервере. Другими словами, большинство серверов конфигурируются файловой структурой вроде этой:/home/yourusername/yoursite.com/path/to/uploads/. Убедитесь, что используете полный путь с начальными и конечными метками "/".

Находим корневой каталог сервера

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

Остальная часть скрипта просто обрабатывает функции, основанные на установленных нами в вышеприведенном коде параметрах.

Вначале проверяется массив видов файлов, и если данного расширения в нем нет, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

Проверьте размер файла на соответствие установленной переменной, если он больше, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

Эта часть кода проверяет папку на сервере, чтобы убедиться, что она перезаписываемая, или пригодна для размещения в ней файла нашим скриптом. Если нет, снова применяем (die) и выводим сообщение пользователю.

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

upload.php

Скопируйте и вставьте весь этот код в новый файл и сохраните его как upload.php

Устанавливаем права доступа к файлам

Перед тем, как протестировать свой загрузчик, нужно убедиться, что папка, куда пойдут наши выгрузки, перезаписываемая. Я обойдусь без обычных вещей типа CHMOD на 777 и пойду дальше. Если вы знакомы с использованием клиента Telnet, эта часть – не для вас, она для тех, кто был совсем как я, когда начинал, жаждущим прочесть и выучить CHMOD и тут же подумавшим «Что за фигня?»

В сущности, откройте свой ftp-клиент и пройдите в папку, куда перемещаются загрузки из этого загрузчика. Щелкните правой кнопкой мыши по папке и выберите свойства (properties), убедитесь, что все окна установлены на read, write и execute, (777) нажмите OK и закройте окно.

Пройдите в Dreamweaver к папке с выгрузками во время дистанционного управления и щелкните правой кнопкой мыши по файлу, выберите «Установить права доступа» (Set permissions) и далее следуйте вышеприведенным инструкциям.

Изменение прав доступа к файлам на сервере

Шаг 5: попробуйте

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

Спасибо за прочтение!

Автор: VagrantRadio

Источник: www.vagrantradio.com

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Загрузка файлов ajax

webformyself.com


You May Also Like

About the Author: admind

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

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

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