Пример загрузки изображений через AJAX с помощью плагина jQuery Form Plugin.
Как работает:
- На поле выбора файла с
id="js-file"
повешено jquery событиеchange
. - При выборе файла срабатывает событие и выполняется метод плагина
ajaxSubmit
, он все поля из формы сid="js-form"
включая выбранный файл отправляет на uploads.php. - Далее то что отдаст uploads.php выведется в
<div id="result">...</div>
. - После завершения, форма очищается методом
reset()
т.к. input file останется с выбранным файлом.
<form id="js-form" method="post">
<input id="js-file" type="file" name="file">
</form>
<div id="result">
<!-- Сюда выводится результат из upload_ajax.php -->
</div>
<script src="/jquery.min.js"></script>
<script src="/jquery.form.min.js"></script>
<script>
$('#js-file').change(function() {
$('#js-form').ajaxSubmit({
type: 'POST',
url: '/upload_ajax.php',
target: '#result',
success: function() {
// После загрузки файла очистим форму.
$('#js-form')[0].reset();
}
});
});
</script>
Код обработчика upload_ajax.php
<?php
$file = @$_FILES['file'];
$error = $success = '';
// Разрешенные расширения файлов.
$allow = array('jpg', 'jpeg', 'png', 'gif');
// Директория, куда будут загружаться файлы.
$path = $_SERVER["DOCUMENT_ROOT"] . '/uploads/';
if (!empty($file)) {
// Проверим на ошибки загрузки.
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 '<span class="success">' . $success . '</span>';
} else {
echo '<span class="error">' . $error . '</span>';
}
}
Пример загрузки файла
К input file нужно добавить атрибут multiple
и дописать к названию – []
.
<form id="js-form" method="post" enctype="multipart/form-data">
<input id="js-file" type="file" name="file[]" multiple>
</form>
<div id="result">
<!-- Сюда выводится результат из uploads.php -->
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//malsup.github.io/min/jquery.form.min.js"></script>
<script>
$('#js-file').change(function() {
$('#js-form').ajaxSubmit({
type: 'POST',
url: '/upload_ajax.php',
target: '#result',
success: function() {
// После загрузки файла очистим форму.
$('#js-form')[0].reset();
}
});
});
</script>
Меняется PHP-обработчик:
<?php
$input_name = 'file';
// Разрешенные расширения файлов.
$allow = array('jpg', 'jpeg', 'png', 'gif');
// Директория, куда будут загружаться файлы.
$path = $_SERVER["DOCUMENT_ROOT"] . '/uploads/';
if (isset($_FILES[$input_name])) {
// Преобразуем массив $_FILES в удобный вид для перебора в foreach.
$files = array();
$diff = count($_FILES[$input_name]) - count($_FILES[$input_name], COUNT_RECURSIVE);
if ($diff == 0) {
$files = array($_FILES[$input_name]);
} 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 '<p class="success">' . $success . '</p>';
} else {
echo '<p class="error">' . $error . '</p>';
}
}
}