Ajax Upload

Асинхронная загрузка файлов на сервер PHP + AJAX

Про загрузку файлов на сервер я писал здесь. Сегодня я расскажу про асинхронную загрузку файлов на сервер.

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

В этой статье рассмотрим простое решение одной из самых распространенных задач – асинхронная загрузка файла на сервер при помощи PHP. Задача будет следующая: На странице (предположим, что это страница в личном кабинете пользователя) есть форма с input типа file и кнопка Отправить . Ниже находится контейнер с картинкой (аватар пользователя по задумке) в который асинхронно подгружается картинка после выполнения AJAX запроса. И по умолчанию она просто выводится из базы данных. То есть, при загрузке картинки новое сгенерированное название будет записываться в БД, сама картинка под этим названием загружаться на сервер и выводится в контейнере взамен предыдущей. И всё это асинхронно.

Сразу скажу, что я по бОльшей степени преследовал цель описать сам процесс загрузки, особо не сосредотачиваясь на «элегантности» кода ). Кто как захочет использовать этот код. Кто-то кусочек нужный возьмёт, кто-то целый класс напишет на его основе, кто-то переделает для себя, кто-то вовсе не будет его использовать никак. Тем более, там действительно, нужна доработка под боевые задачи. Например, валидацию на MIME-типы (и другие проверки) нужно делать ещё в JS до попадания данных скрипту PHP. В скрипт данные должны приходить отвалидированные. Или при загрузке картинки удалять на сервере старую картинку. Поэтому я решил, что полезнее будет подробно описать процесс, нежели допиливать до идеала то, что каждый для себя доработает как нужно. Поехали.

Безусловно, подключаем jQuery (если ещё в проекте нигде данная библиотека не подключена):

Простая разметка HTML формы и картинка из базы. Предположим, что у вас уже есть база данных и в базе уже есть таблица (например, user ). В блоке с id=»photo-content» выводится картинка из базы. Я весь этот код помещу в файле index.php .

prepare($query); $stmt->execute([$id]); $image = $stmt->fetchColumn(); ?>     
Image upload 
  
  
 
   

#wrapper < width: 60%; margin: 20px auto; >form button < margin-bottom: 50px; >input[type=text], input[type=file] < margin-bottom: 20px; >#process

$(document).ready(function()< $("#form-file-ajax").on('submit', function(e)< e.preventDefault(); var formData = new FormData(); var form = $(this); formData.append('file', $('#file').prop("files")[0]); $.ajax(< url: form.attr('action'), type: form.attr('method'), processData: false, contentType: false, cache:false, dataType : 'text', data: formData, // Будет вызвана перед осуществлением AJAX запроса beforeSend: function()< $('#process').fadeIn(); >, // будет вызвана после завершения ajax-запроса // (вызывается позднее функций-обработчиков успешного (success) или аварийного (error) complete: function () < $('#process').fadeOut(); >, success: function(data)< //form[0].reset(); data = JSON.parse(data); var image = '
'; var photoContent = $("#photo-content"); photoContent.html(''); photoContent.append(image); >, error: function(data) < console.log(data); >>); >); >);

 // Записать имя файла в БД $db = new PDO('mysql:host=localhost;dbname=ajax', 'root', 'password'); $user_id = 1; $query = "UPDATE `user` SET `avatar` = :avatar WHERE `id` = :user_id"; $params = [':avatar' => $file, ':user_id' => $user_id]; $stmt = $db->prepare($query); if (!$stmt->execute($params)) < throw new Exception('Произошла ошибка при записи в БД!'); >// Записать в $data имя файла $data = ['file' => $file]; echo json_encode($data); > catch (Exception $e) < die($e->getMessage()); > > > // Генерируем уникальное имя для файла function randomFileName($extension = false) < $extension = $extension ? '.' . $extension : ''; do < $name = md5(microtime() . rand(0, 9999)); $file = $name . $extension; >while (file_exists($file)); return $file; >

Вот и все. Ясное дело, что это не идеальное решение и как использовать его (если использовать) решать каждому самостоятельно. Может быть в дальнейшем я напишу специальный класс со всеми недочётами. А пока, как-то так.

Для работы данного примера без ошибок не забудьте заменить все адреса своими и указать корректные доступы к базе данных!

Источник

Загрузка файлов через AJAX с помощью jQuery Form Plugin

Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.

Как работает:

1. На поле выбора файла с id=»js-file» повешено jquery событие change .
2. При выборе файла срабатывает событие и выполняется метод плагина ajaxSubmit , он все поля из формы с id=»js-form» включая выбранный файл отправляет на uploads.php.
3. Далее то что отдаст uploads.php выведется в .
4. После завершения, форма очищается методом reset() т.к. input file останется с выбранным файлом.

Загрузка одного файла

Код обработчика upload_ajax.php

 > elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >else < // Оставляем в имени файла только буквы, цифры и некоторые символы. $pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\\[\]\.]"; $name = mb_eregi_replace($pattern, '-', $file['name']); $name = mb_ereg_replace('[-]+', '-', $name); $parts = pathinfo($name); if (empty($name) || empty($parts['extension'])) < $error = 'Не удалось загрузить файл.'; >elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) < $error = 'Недопустимый тип файла'; >else < // Перемещаем файл в директорию. if (move_uploaded_file($file['tmp_name'], $path . $name)) < // Далее можно сохранить название файла в БД и т.п. $success = 'Файл «' . $name . '» успешно загружен.'; >else < $error = 'Не удалось загрузить файл.'; >> > // Выводим сообщение о результате загрузки. if (!empty($success)) < echo ''; > else < echo ''; > >

Пример загрузки файла

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

К input file нужно добавить атрибут multiple и дописать к названию – [] .

 else < foreach($_FILES[$input_name] as $k =>$l) < foreach($l as $i =>$v) < $files[$i][$k] = $v; >> > foreach ($files as $file) < $error = $success = ''; // Проверим на ошибки загрузки. if (!empty($file['error']) || empty($file['tmp_name'])) < switch (@$file['error']) < case 1: case 2: $error = 'Превышен размер загружаемого файла.'; break; case 3: $error = 'Файл был получен только частично.'; break; case 4: $error = 'Файл не был загружен.'; break; case 6: $error = 'Файл не загружен - отсутствует временная директория.'; break; case 7: $error = 'Не удалось записать файл на диск.'; break; case 8: $error = 'PHP-расширение остановило загрузку файла.'; break; case 9: $error = 'Файл не был загружен - директория не существует.'; break; case 10: $error = 'Превышен максимально допустимый размер файла.'; break; case 11: $error = 'Данный тип файла запрещен.'; break; case 12: $error = 'Ошибка при копировании файла.'; break; default: $error = 'Файл не был загружен - неизвестная ошибка.'; break; >> elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >else < // Оставляем в имени файла только буквы, цифры и некоторые символы. $pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\\[\]\.]"; $name = mb_eregi_replace($pattern, '-', $file['name']); $name = mb_ereg_replace('[-]+', '-', $name); $parts = pathinfo($name); if (empty($name) || empty($parts['extension'])) < $error = 'Недопустимое тип файла'; >elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) < $error = 'Недопустимый тип файла'; >else < // Перемещаем файл в директорию. if (move_uploaded_file($file['tmp_name'], $path . $name)) < // Далее можно сохранить название файла в БД и т.п. $success = 'Файл «' . $name . '» успешно загружен.'; >else < $error = 'Не удалось загрузить файл.'; >> > // Выводим сообщение о результате загрузки. if (!empty($success)) < echo '
'; > else < echo '
 > >

Источник

Загрузка файлов через jQuery AJAX

В преведущей статье был приведен пример отправки файлов через AJAX с помощью плагина «jQuery Form Plugin». Но файлы можно отправить и обычным методом jQuery $.ajax() .

Отправка одного файла

Для примера возьмем поле и элемент div с id=»result» для вывода результата.

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

Помимо использования formData, в настройках $.ajax нужно указать параметры contentType: false и processData: false т.к. без них файл не отправится.

Код скрипта upload.php

 $input_name = 'file'; // Разрешенные расширения файлов. $allow = array(); // Запрещенные расширения файлов. $deny = array( 'phtml', 'php', 'php3', 'php4', 'php5', 'php6', 'php7', 'phps', 'cgi', 'pl', 'asp', 'aspx', 'shtml', 'shtm', 'htaccess', 'htpasswd', 'ini', 'log', 'sh', 'js', 'html', 'htm', 'css', 'sql', 'spl', 'scgi', 'fcgi', 'exe' ); // Директория куда будут загружаться файлы. $path = __DIR__ . '/uploads/'; $error = $success = ''; if (!isset($_FILES[$input_name])) < $error = 'Файл не загружен.'; >else < $file = $_FILES[$input_name]; // Проверим на ошибки загрузки. if (!empty($file['error']) || empty($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >elseif ($file['tmp_name'] == 'none' || !is_uploaded_file($file['tmp_name'])) < $error = 'Не удалось загрузить файл.'; >else < // Оставляем в имени файла только буквы, цифры и некоторые символы. $pattern = "[^a-zа-яё0-9,~!@#%^-_\$\?\(\)\\[\]\.]"; $name = mb_eregi_replace($pattern, '-', $file['name']); $name = mb_ereg_replace('[-]+', '-', $name); $parts = pathinfo($name); if (empty($name) || empty($parts['extension'])) < $error = 'Недопустимый тип файла'; >elseif (!empty($allow) && !in_array(strtolower($parts['extension']), $allow)) < $error = 'Недопустимый тип файла'; >elseif (!empty($deny) && in_array(strtolower($parts['extension']), $deny)) < $error = 'Недопустимый тип файла'; >else < // Перемещаем файл в директорию. if (move_uploaded_file($file['tmp_name'], $path . $name)) < // Далее можно сохранить название файла в БД и т.п. $success = '
Файл «' . $name . '» успешно загружен.
'; > else < $error = 'Не удалось загрузить файл.'; >> > > // Вывод сообщения о результате загрузки. if (!empty($error)) < $error = '
' . $error . '
'; > $data = array( 'error' => $error, 'success' => $success, ); header('Content-Type: application/json'); echo json_encode($data, JSON_UNESCAPED_UNICODE); exit();

Источник

Ajax загрузка файлов на сервер php

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

AJAX и PHP: загрузка файла

Stimed — стили в зависимости от времени суток

Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

Источник

Как создать PHP-скрипт для загрузки файлов с помощью jQuery и AJAX

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

Базовые настройки

Теперь займемся написанием скрипта для загрузки файлов.

СозданиеPHP-скрипта загрузки файлов

• Создайте HTML-форму загрузки на основе Bootstrap.
• Создайте Ajax-скрипты для загрузки файлов.
• Примените проверку безопасности.
• Создайте PHP-скрипты для обработки данных.

Создание HTML-формы

HTML-форма — это интерфейс, через который пользователь передает данные серверу. Чтобы форма работала с файлами, нужно установить для элемента метод POST.

Еще одним важным атрибутом формы является enctype . Для него нужно установить значение multipart / form-data . А для атрибута type элемента загрузки файлов должно быть установлено значение file.

Создайте файл index.php и добавьте в него приведенный ниже код.

         
 
 
Ajax File Uploading with Database MySql
 
  
NAME 
 
EMAIL 
 
 
 
www.Cloudways.com
 
 
 
 

В этой форме я использовал классы Bootstrap, чтобы применить для формы некоторые стили. Я также указал в атрибуте action файл ajaxupload.php .

Использование jQuery и AJAX для загрузки файлов

Для отправки данных и загрузки файлов будет использоваться jQuery и AJAX. Поэтому я начну с подключения библиотеки jQuery.

 $(document).ready(function(e)< $("#form").on('submit',(function(e)< e.preventDefault(); $.ajax(< url:"ajaxupload.php", type:"POST", data: newFormData(this), contentType:false, cache:false, processData:false, beforeSend:function() < //$("#preview").fadeOut(); $("#err").fadeOut(); >, success:function(data) < if(data=='invalid') < // неверный формат файла. $("#err").html("Invalid File !").fadeIn(); >else < // просмотрзагруженногофайла. $("#preview").html(data).fadeIn(); $("#form")[0].reset(); >>, error:function(e) < $("#err").html(e).fadeIn(); >>); >)); >);

В приведенном выше коде метод $ajax() используется для отправки данных.

Настройка и подключение базы данных MySQL с помощью PHP

Следующим шагом будет настройка базы данных MySQL. Создайте таблицу с именем «uploading» . Поля таблицы: name , email , file_name :

CREATE TABLE`uploading`( `id`int(11)NOTNULLAUTO_INCREMENT, `name`varchar(100)COLLATE utf8_unicode_ci NOTNULL, `email`varchar(100)COLLATE utf8_unicode_ci NOTNULL, `file_name`varchar(100)COLLATE utf8_unicode_ci NOTNULL, PRIMARY KEY(`id`) )ENGINE=InnoDB DEFAULTCHARSET=utf8 COLLATE=utf8_unicode_ci;

Затем создайте файл db.php , предназначенный для соединения базы данных с PHP-приложением. Вставьте в него фрагмент кода, приведенный ниже:

connect_error)< die("Unable to connect database: ".$db->connect_error); >

Создание PHP-скрипта для загрузки файлов

Когда пользователь взаимодействует с формой, файл загружается во временную папку. При этом вся информация о файле хранится в многомерном массиве $_FILES . Индексом ключа этого массива является атрибут name поля .

В нашем случае именем индекса является $_FILES [«image»] . Более подробная информация о загружаемом файле хранится в следующих индексах.

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

1. Проверяем, возникли ли ошибки при загрузке.

2. Проверяем, разрешен ли тип загружаемого файла.

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

4. Проверяем, является ли имя загружаемого файла корректным (если имя файла содержит /, это повлияет на путь сохранения).

5. Проверяем, что загружаемый файл еще не существует.

Напишем PHP-скрипт для работы с функциями загрузки файлов. Создайте файл ajaxupload.php и добавьте в него приведенный ниже код.

"; $name=$_POST['name']; $email=$_POST['email']; //включаем файл конфигурации базы данных include_once'db.php'; //вставляем данные формы в базу данных $insert=$db->query("INSERT uploading (name,email,file_name) VALUES ('".$name."','".$email."','".$path."')"); //выводим $insert?'ok':'err'; > > else < echo'invalid'; >> ?>

Теперь, когда все проверки выполнены, перемещаем загруженный файл из папки tmp в папку upload . Для этого создайте ее в каталоге проекта. В папку upload будут сохраняться загруженные изображения. pathinfo() — это встроенная функция, которая возвращает имя файла и расширение.

Проверяем наличие ошибок при загрузке

Чтобы проверить, это введите приведенный ниже код. Если значение error больше 0, значит, возникла ошибка.

if($errorimg>0) < die('
An error occurred while uploading the file
 '); >

Проверяем, что файл имеет допустимый размер

Размер файла измеряется в байтах. Если ограничение на размер загружаемого файла установленона уровне 500kb, то он должен быть меньше 500000 байт.

if($myFile['size']>500000) < die('
File is too big
 '); >

move_uploaded_file — это функция, которая перемещает файл из $myFile[“tmp_name”] (временное место хранения) в «upload /» . $name (постоянное место хранения), а также проверяет запись таблицы базы данных.

Завершение

В этой статье я продемонстрировал, как создать PHP-скрипт для загрузки изображений и файлов с помощью AJAX и jQuery. Здесь вы найдете демо-версию этого приложения.

Источник