Ajax Upload

Содержание

Загрузка файлов через jQuery AJAX
Отправка одного файла
Код скрипта upload.php
Загрузка изображений с превью AJAX + PHP + MySQL
index.php
Отправить отзыв:
Image upload
handler.php
ajaxupload.js

Загрузка файлов через 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();

Источник

Читайте также: Java if false example

Загрузка изображений с превью AJAX + PHP + MySQL

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

index.php upload_image.php save_reviews.php reviews.php jquery.min.js uploads/ ├── tmp/

Первое что понадобится: HTML форма и JS скрипт, который после выбора одного или несколькольких файлов отправит их на upload_image.php через AJAX.

index.php

 Отправить отзыв:
 Ваше имя: Комментарий: Изображения: 
      Image upload
 Image file:

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