Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выбор файла</title>
<!-- <link rel="stylesheet" href="/style.css"> -->
<style>
.l-wrap {
max-width: 1140px;
margin-right: auto;
margin-left: auto;
}
.grid-item {
width: calc((100% - 24px * 4) / 4);
margin-top: 24px;
margin-left: 12px;
margin-right: 12px;
float: left;
}
@media (max-width: 600px) {
.grid-item {
width: 100%;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
}
}
.grid-item {
justify-content: center;
align-items: center;
height: 80px;
text-align: center;
margin-bottom: 8em;
margin-top: 3em;
}
.grid-item .img-table {
width: 96%;
height:150px;
min-height:150px;
max-height:150px;
background-size: contain !important;
background-position: center !important;
}
.grid-item .row {
width: 100%;
}
</style>
<script>
// Функция для получения параметров из строки запроса.
function getUrlParam(paramName) {
var reParam = new RegExp( '(?:[\?&]|&)' + paramName + '=([^&]+)', 'i' );
var match = window.location.search.match( reParam );
return (match && match.length > 1) ? match[1] : null;
}
// Немного измененая функция из официальной документации, которая передает нужные параметры обратно в CKEditor.
// Она принимает КНОПКУ КАК ОБЪЕКТ которую ВЫ выбрали.
// Далее мы вынимаем у кнопки атрибут href (а он соотвествует ссылке у картинки), через split и pop получаем название файла (например 1.png)
// И прибавляем к нему путь той самой папки c картинкам куда мы изначально складывали их с помощью upload.php.
function returnFileUrl(img) {
var funcNum = getUrlParam('CKEditorFuncNum');
var href = img.href.split('/').pop();
href = '/img/' + href;
window.opener.CKEDITOR.tools.callFunction(funcNum, href);
window.close();
}
</script>
</head>
<body>
<div class="uk-container">
<h1 style="padding-top: 2em;" class="uk-h2">Выберите изображение</h1>
<div class="l-wrap">
<div class="three-col-grid">
<?php
$srcdir = '/img'; // Папка c картинкам куда мы изначально складывали их с помощью upload.php.
$dir = $_SERVER['DOCUMENT_ROOT'].$srcdir; // Тут мы создали переменную dir в которую поместили полный путь к нашей папке где хранятся картинки.
$files = array_diff(scandir($dir), array('..', '.')); // Здесь мы просканировали нужную нам директорию, получили N-ое кол-во файлов, после удалили мусор из массива.
// Тут мы пускаем цикл, который будет выполняться пока массив files не опустеет.
// А с помощью onclick="returnFileUrl(this); return false;" мы получаем по нажатию на кнопку выбранный объект (кнопку на которую нажали) и передаем в функцию returnFileUrl
// А и еще, return false; запрещает переход по кнопке.
foreach ($files as &$value) {
echo '<div class="grid-item">
<p class="uk-text-emphasis">
<div class="img-table" style="background: url(/img/' . $value . ') no-repeat;"></div>
<div>
<p class="uk-text-emphasis down"><b>'
. $value .
'</b></p>
<p class="uk-text-emphasis down">
<a onclick="returnFileUrl(this); return false;" href="'. $value . '" class="uk-button uk-button-primary">Выбрать</a><b>
</div>
</div>';
}
?>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.