Как создать PHP-скрипт для загрузки файлов с помощью jQuery и AJAX
В этой статье я покажу, как добавить на сайт функционал для загрузки файлов с помощью jQuery, AJAX и MySQL.
- Базовые настройки
- СозданиеPHP-скрипта загрузки файлов
- Создание HTML-формы
- Использование jQuery и AJAX для загрузки файлов
- Настройка и подключение базы данных MySQL с помощью PHP
- Создание PHP-скрипта для загрузки файлов
- Проверяем наличие ошибок при загрузке
- Проверяем, что файл имеет допустимый размер
- Завершение
Базовые настройки
Что нужно:
- PHP 7.1.
- MySQL.
- Файл JQuery / Ajax.
Теперь займемся написанием скрипта для загрузки файлов.
СозданиеPHP-скрипта загрузки файлов
Пошаговый процесс:
- Создайте HTML-форму загрузки на основе Bootstrap.
- Создайте Ajax-скрипты для загрузки файлов.
- Примените проверку безопасности.
- Создайте PHP-скрипты для обработки данных.
Создание HTML-формы
HTML-форма - это интерфейс, через который пользователь передает данные серверу. Чтобы форма работала с файлами, нужно установить для элемента <form> метод POST.
Еще одним важным атрибутом формы является enctype. Для него нужно установить значение multipart / form-data. А для атрибута type элемента загрузки файлов <input> должно быть установлено значение file.
Создайте файл index.php и добавьте в него приведенный ниже код.
<!doctypehtml>
<html>
<head lang="en">
<metacharset="utf-8">
<title>Ajax File Upload with jQuery andPHP</title>
<link rel="stylesheet"href="style.css"type="text/css"/>
<scriptsrc="js/jquery-1.11.3-jquery.min.js"></script>
<scriptsrc="js/script.js"></script>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1><ahref="#"target="_blank"><imgsrc="logo.png"width="80px"/>Ajax File Uploading with Database MySql</a></h1>
<hr>
<form id="form"action="ajaxupload.php"method="post"enctype="multipart/form-data">
<div class="form-group">
<label for="name">NAME</label>
<input type="text"class="form-control"id="name"name="name"placeholder="Enter name"required/>
</div>
<div class="form-group">
<label for="email">EMAIL</label>
<input type="email"class="form-control"id="email"name="email"placeholder="Enter email"required/>
</div>
<input id="uploadImage"type="file"accept="image/*"name="image"/>
<div id="preview"><imgsrc="filed.png"/></div><br>
<input class="btnbtn-success"type="submit"value="Upload">
</form>
<div id="err"></div>
<hr>
<p><ahref="https://www.cloudways.com"target="_blank">www.Cloudways.com</a></p>
</div>
</div>
</div></body></html>
В этой форме я использовал классы Bootstrap, чтобы применить для формы некоторые стили. Я также указал в атрибуте action файл ajaxupload.php.
Использование jQuery и AJAX для загрузки файлов
Для отправки данных и загрузки файлов будет использоваться jQuery и AJAX. Поэтому я начну с подключения библиотеки jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(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-приложением. Вставьте в него фрагмент кода, приведенный ниже:
<?php
//Информация о базе данных
$dbHost='localhost';
$dbUsername='fkmc';
$dbPassword='';
$dbName='fkc';
//Создаем соединение и выбираем базу данных
$db=newmysqli($dbHost,$dbUsername,$dbPassword,$dbName);
if($db->connect_error){
die("Unable to connect database: ".$db->connect_error);
}
Создание PHP-скрипта для загрузки файлов
Когда пользователь взаимодействует с формой, файл загружается во временную папку. При этом вся информация о файле хранится в многомерном массиве $_FILES. Индексом ключа этого массива является атрибут name поля <input type = '' file 'name = "image">.
В нашем случае именем индекса является $_FILES ["image"]. Более подробная информация о загружаемом файле хранится в следующих индексах.
<?php
$img=$_FILES["image"]["name"]stores the original filename from the client
$tmp=$_FILES["image"]["tmp_name"]stores the name of the designated temporary file
$errorimg=$_FILES["image"][“error”]stores any error code resulting from the transfer
?>
После того, как файл загружен во временную папку, и вся его информация сохранена в массиве, вызывается функция move_uploaded_file(). Она предназначена для перемещения файла из текущего временного местоположения в постоянную директорию. Процесс загрузки файла можно описать следующим образом:
1. Проверяем, возникли ли ошибки при загрузке.
2. Проверяем, разрешен ли тип загружаемого файла.
3. Проверяем, что загружаемый файл имеет допустимый размер.
4. Проверяем, является ли имя загружаемого файла корректным (если имя файла содержит /, это повлияет на путь сохранения).
5. Проверяем, что загружаемый файл еще не существует.
6. Загружаем файл.
Напишем PHP-скрипт для работы с функциями загрузки файлов. Создайте файл ajaxupload.php и добавьте в него приведенный ниже код.
<?php
$valid_extensions=array('jpeg','jpg','png','gif','bmp','pdf','doc','ppt');// valid extensions
$path='uploads/';// upload directory
if(!empty($_POST['name'])||!empty($_POST['email'])||$_FILES['image'])
{
$img=$_FILES['image']['name'];
$tmp=$_FILES['image']['tmp_name'];
// получаемрасширениезагруженногофайла
$ext=strtolower(pathinfo($img,PATHINFO_EXTENSION));
// можем загрузить и изображение с помощью функции rand
$final_image=rand(1000,1000000).$img;
// проверяемформат
if(in_array($ext,$valid_extensions))
{
$path=$path.strtolower($final_image);
if(move_uploaded_file($tmp,$path))
{
echo"<img src='$path' />";
$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('<div class="alert alert-danger" role="alert"> An error occurred while uploading the file </div>');
}
Проверяем, что файл имеет допустимый размер
Размер файла измеряется в байтах. Если ограничение на размер загружаемого файла установленона уровне 500kb, то он должен быть меньше 500000 байт.
if($myFile['size']>500000){
die('<div class="alert alert-danger" role="alert"> File is too big </div>');
}
move_uploaded_file - это функция, которая перемещает файл из $myFile[“tmp_name”] (временное место хранения) в "upload /". $name (постоянное место хранения), а также проверяет запись таблицы базы данных.
Завершение
В этой статье я продемонстрировал, как создать PHP-скрипт для загрузки изображений и файлов с помощью AJAX и jQuery. Здесь вы найдете демо-версию этого приложения.