我们有一个简单的表单,一个多图片选择按钮,以及一个上传它们的按钮!
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>
我只是无法添加文件类型检查(我需要图片)并更改文件名。
从 web 服务器的角度来看,文件类型对我们很重要,因为 web 服务器将决定如何使用这个文件。Web 服务器将通过扩展来决定这一点。
因此,您需要做的就是获取文件扩展名并检查它是否存在于允许值的数组中
文件名必须随机更改。出于这些目的,我更喜欢文件内容中的 md5 - 这样可以同时避免重复。