Ajax File Upload with jQuery andPHP

Ajax File Upload with PHP and jQuery

Are you looking for a file upload using Ajax in PHP? Uploading a file through Ajax is a preferred way. It adds a better user experience to the application. In this article, I show you how to upload files through Ajax with PHP and jQuery.

File or Image uploading is a common task for developers. There are several situations where you need to build file uploading functionality. Some of the common examples are uploading profile photos, slider images, testimonials, portfolios, carousels, etc.

Why need File Upload using Ajax?

The major reason for performing file uploads with Ajax is you don’t want to refresh a page after file uploads. There is no point in loading a whole page if not necessary. If you are doing it then you are adding an extra load on a server unnecessarily.

File uploading using Ajax reduces this server load and gives a better user experience. It works in the background without interfering with the other content of a page.

File Upload using Ajax with PHP and jQuery

Let’s start by creating a form that has a file input and the submit button. Add the below HTML code in your file say index.php .

As I am going to write a little bit of JavaScript code, I provided the class file and id frmUpload to the file input and HTML form respectively. These attributes would act as an identifier in JavaScript.

JavaScript Code

Next, write a JavaScript code that will perform the following tasks.

• Take a file input from the HTML form.
• Send this form data to the server-side script via Ajax.
• Receives the response from the server.

In the above JavaScript code, I am sending file content to ajax.php and also handling the response.

PHP Code

At this stage, we are done with sending the file contents to the server side. Now create the ajax.php file to write the PHP code which uploads files on a server.

 move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']); echo "success"; die();

The above PHP code first checks for the uploads directory. If this folder does not exist, it creates the folder and uploads the file inside this folder.

I hope you can now easily implement file uploading using Ajax on your website. I would like to hear your thoughts in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Источник

File upload with php and jquery

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

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

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

• 

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

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

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

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

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

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

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

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

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

Источник

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

Источник

jQuery File Upload

а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap’е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

Быстрое подключение

Доступно две версии плагина. В Bootstrap’е и в Jquery UI
Если вам приспичит полностью переделать интерфейс, то вот голая версия плагина

Как настроить плагин?

Используем jQuery File Upload (версию UI) для PHP.

То что идет в коробке с плагином полностью работоспособно, остается только залить это себе на сервер.

Качаем, распаковываем, заливаем распакованное на наш сервер ( папку можно переименовывать ).
Пробуем запустить демо страницу для проверки работоспособности.

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

Используем jQuery File Upload (версию UI) для Google App Engine

Качаем плагин, распаковываем, редактируем файл app.yaml для подмены «jquery-file-upload» на ваш собственный App ID. Заливаем в server/gae-python или server/gae-go ( в зависимости от среды разработки) как ваш App Engine instance.
Залейте папку jQuery-File-Upload (корневую) на любой сервер, после редактирования поля form action target на ваш урл к вашему App Engine instance.

Использование jQuery File Upload (версию UI) с Node.js

Вы можете установить пример на Node.js на ваш сервер через npm.
npm install blueimp-file-upload-node

Запуск сервиса:
./node_modules/blueimp-file-upload-node/server.js

Качаем архив с плагином, распаковываем, правим index.html и настраиваем путь в form action на ваш Node.js ( типа «localhost:8080»).
Вы можете залить папку с проектом ( без ненужных файлов) на любой сервер и использовать его как интерфейс для вашего сервиса по заливке файлов на Node.js.

Использование jQuery File Upload (версию UI) с другими платформами

Ps. рекомендации с комментариев

«при связке Apache+PHP нужно дать веб-серверу право на запись в папки files и thumbnails (в Ubuntu его зовут, например www-data). Для проверки на работоспособность можно просто выставить ‘777’ на эти папки, но это потенциально небезопасный путь.

В противном случае появляется обилие UNEXPECTED TOKEN всех мастей. » — irsick

Источник

Как создать 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. Здесь вы найдете демо-версию этого приложения.

Источник