У нас есть простая форма , кнопка выбора нескольких изображений и кнопка загрузки их!
var files;
// Вешаем функцию на событие
// Получим данные файлов и добавим их в переменную
$('input[type=file]').change(function(){
files = this.files;
});
// Вешаем функцию ан событие click и отправляем AJAX запрос с данными файлов
$('.submit.button').click(function( event ){
event.stopPropagation(); // Остановка происходящего
event.preventDefault(); // Полная остановка происходящего
// Содадим данные формы и добавим в них данные файлов из files
var data = new FormData();
$.each( files, function( key, value ){
data.append( key, value );
});
// Отправляем запрос
$.ajax({
url: './submit.php?uploadfiles',
type: 'POST',
data: data,
cache: false,
dataType: 'json',
processData: false, // Не обрабатываем файлы (Don't process the files)
contentType: false, // Так jQuery скажет серверу что это строковой запрос
success: function( respond, textStatus, jqXHR ){
// Если все ОК
if( typeof respond.error === 'undefined' ){
// Файлы успешно загружены, делаем что нибудь здесь
console.log( respond );
// выведем пути к загруженным файлам в блок '.ajax-respond'
var files_path = respond.files;
var html = '';
$.each( files_path, function( key, val ){ html += val +'<br>'; } )
$('.ajax-respond').html( html );
}
else{
console.log('ОШИБКИ ОТВЕТА сервера: ' + respond.error );
}
},
error: function( jqXHR, textStatus, errorThrown ){
console.log('ОШИБКИ AJAX запроса: ' + textStatus );
}
});
});
//PHP
<?php
// Переменная ответа
$data = array();
echo json_encode($data);
if( isset( $_GET['uploadfiles'] ) ){
$error = false;
$files = array();
$uploaddir = './uploads/'; // . - текущая папка где находится submit.php
// Создадим папку если её нет
if( ! is_dir( $uploaddir ) ) mkdir( $uploaddir, 0777 );
// переместим файлы из временной директории в указанную
foreach( $_FILES as $file ){
if( move_uploaded_file( $file['tmp_name'], $uploaddir . basename($file['name']) ) ){
$files[] = realpath( $uploaddir . $file['name'] );
}
else{
$error = true;
}
}
$data = $error ? array('error' => 'Ошибка загрузки файлов.') : array('files' => $files );
echo json_encode( $data );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<input type="file" multiple="multiple" accept="image/*">
<a href="#" class="submit button">Загрузить файлы</a>
<div class="ajax-respond"></div>
</div>
Никак не могу добавить проверку на тип файла ( надо именно картинки) и сделать изменения имени файла.
Тип файла нам важен с точки зрения веб-сервера, поскольку именно веб-сервер будет решать, как использовать данный файл. А веб-сервер будет это решать по расширению.
Следовательно, надо всего лишь получить расширение имени файла и проверить его наличие в массиве разрешенных значений
$allowedExts = array('png', 'jpeg', 'jpg', 'gif');
$ext = pathinfo($file['name'], PATHINFO_EXTENSION);
if( !in_array($ext, $allowedExts) )
{
$error = ['error' => 'invalid image format'];
}
Имя файла надо изменить на случайное. Я для этих целей предпочитаю md5 от содержимого файла - так можно будет заодно избежать дублей.
$name = md5_file($file['tmp_name']).".$ext";
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть папка с проектомВнутри нее установлены пакеты в /vendor/ с помощью composer
Имеется сайт на неопределенной CMS (предположительно parallels), у него в корне лежит htaccess, в котором мне мешает жить одна строчка