Делаю медиа библиотеку на сайт (как на wordpress), и мне нужно через ajax загружать фотографии в нее. Но для того чтобы увидеть новое загруженное фото нужно перезагрузить страницу. Как показывает загруженные фото без перезагрузки?
index.php
<?
$files = glob('uploads/*.jpg');
usort($files, function ($a, $b)
{
return filemtime($a) < filemtime($b);
});
foreach ($files as $file)
{
printf(' <img src="%1$s" style="cursor:pointer" class="gallery_img">', $file, date('F d Y, H:i:s', filemtime($file)));
}
?>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<div class="wrapper">
<input type="file" multiple="multiple" accept=".txt,image/*">
<a href="#" class="upload_files button">Загрузить файлы</a>
<div class="ajax-reply"></div>
</div>
<script>
(function($){
var files; // переменная. будет содержать данные файлов
// заполняем переменную данными файлов, при изменении значения file поля
$('input[type=file]').on('change', function(){
files = this.files;
});
// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){
event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для <a> тега
// ничего не делаем если files пустой
if( typeof files == 'undefined' ) return;
// создадим данные файлов в подходящем для отправки формате
var data = new FormData();
$.each( files, function( key, value ){
data.append( key, value );
});
// добавим переменную идентификатор запроса
data.append( 'my_file_upload', 1 );
// AJAX запрос
$.ajax({
url : './submit.php',
type : 'POST',
data : data,
cache : false,
dataType : 'json',
// отключаем обработку передаваемых данных, пусть передаются как есть
processData : false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType : false,
// функция успешного ответа сервера
success : function( respond, status, jqXHR ){
// ОК
if( typeof respond.error === 'undefined' ){
// файлы загружены, делаем что-нибудь
// покажем пути к загруженным файлам в блок '.ajax-reply'
var files_path = respond.files;
var html = '';
$.each( files_path, function( key, val ){
html += val +'<br>';
} )
$('.ajax-reply').html( html );
}
// error
else {
console.log('ОШИБКА: ' + respond.error );
}
},
// функция ошибки ответа сервера
error: function( jqXHR, status, errorThrown ){
console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
}
});
});
})(jQuery)
</script>
submin.php
if( isset( $_POST['my_file_upload'] ) ){
// ВАЖНО! тут должны быть все проверки безопасности передавемых файлов и вывести ошибки если нужно
$uploaddir = './uploads'; // . - текущая папка где находится submit.php
// cоздадим папку если её нет
if( ! is_dir( $uploaddir ) ) mkdir( $uploaddir, 0777 );
$files = $_FILES; // полученные файлы
$done_files = array();
// переместим файлы из временной директории в указанную
foreach( $files as $file ){
$file_name = cyrillic_translit( $file['name'] );
if( move_uploaded_file( $file['tmp_name'], "$uploaddir/$file_name" ) ){
$done_files[] = realpath( "$uploaddir/$file_name" );
}
}
$data = $done_files ? array('files' => $done_files ) : array('error' => 'Ошибка загрузки файлов.');
die( json_encode( $data ) );
}
function cyrillic_translit( $title ){
$iso9_table = array(
'А' => 'A', 'Б' => 'B', 'В' => 'V', 'Г' => 'G', 'Ѓ' => 'G',
'Ґ' => 'G', 'Д' => 'D', 'Е' => 'E', 'Ё' => 'YO', 'Є' => 'YE',
'Ж' => 'ZH', 'З' => 'Z', 'Ѕ' => 'Z', 'И' => 'I', 'Й' => 'J',
'Ј' => 'J', 'І' => 'I', 'Ї' => 'YI', 'К' => 'K', 'Ќ' => 'K',
'Л' => 'L', 'Љ' => 'L', 'М' => 'M', 'Н' => 'N', 'Њ' => 'N',
'О' => 'O', 'П' => 'P', 'Р' => 'R', 'С' => 'S', 'Т' => 'T',
'У' => 'U', 'Ў' => 'U', 'Ф' => 'F', 'Х' => 'H', 'Ц' => 'TS',
'Ч' => 'CH', 'Џ' => 'DH', 'Ш' => 'SH', 'Щ' => 'SHH', 'Ъ' => '',
'Ы' => 'Y', 'Ь' => '', 'Э' => 'E', 'Ю' => 'YU', 'Я' => 'YA',
'а' => 'a', 'б' => 'b', 'в' => 'v', 'г' => 'g', 'ѓ' => 'g',
'ґ' => 'g', 'д' => 'd', 'е' => 'e', 'ё' => 'yo', 'є' => 'ye',
'ж' => 'zh', 'з' => 'z', 'ѕ' => 'z', 'и' => 'i', 'й' => 'j',
'ј' => 'j', 'і' => 'i', 'ї' => 'yi', 'к' => 'k', 'ќ' => 'k',
'л' => 'l', 'љ' => 'l', 'м' => 'm', 'н' => 'n', 'њ' => 'n',
'о' => 'o', 'п' => 'p', 'р' => 'r', 'с' => 's', 'т' => 't',
'у' => 'u', 'ў' => 'u', 'ф' => 'f', 'х' => 'h', 'ц' => 'ts',
'ч' => 'ch', 'џ' => 'dh', 'ш' => 'sh', 'щ' => 'shh', 'ъ' => '',
'ы' => 'y', 'ь' => '', 'э' => 'e', 'ю' => 'yu', 'я' => 'ya'
);
$name = strtr( $title, $iso9_table );
$name = preg_replace('~[^A-Za-z0-9\'_\-\.]~', '-', $name );
$name = preg_replace('~\-+~', '-', $name ); // --- на -
$name = preg_replace('~^-+|-+$~', '', $name ); // кил - на концах
return $name;
}