javascript — интерфейс JS к папке на сервере

Question

javascript — интерфейс JS к папке на сервере

Я пытаюсь создать интерфейс для содержимого папки моего сервера, используя php, CSS и JS.

Мне удалось заставить мой скрипт читать папку (php) >> упорядочивать массив (php) >> отображать содержимое в сетке на основе их соответствующего индекса массива.

У меня проблемы с сохранением .href каждого элемента при его создании, поэтому я могу ссылаться на местоположение файла (которое отображается на экране в каждом элементе).

Мой код, кажется, перебирает, создает элементы, но ссылка внутри каждого элемента всегда указывает на последний элемент массива, который является «.» Это загружает мою домашнюю страницу. не файл.

Как я могу получить элементы, чтобы они указывали на их соответствующие имена файлов на сервере?

ЗДЕСЬ СЦЕНАРИЙ;

<!DOCTYPE html>
<html>
<body>




<!-- Count all files in DIR and make variable-->

<?php
$dir = "/var/www/html/secure/uploads";

// Sort in descending order
$files = scandir($dir, 1);


print_r ($files);
print_r (sizeof($files));
$count = (sizeof($files));
//create array that has the filenames

print_r ($files);

$js_array = json_encode($files);
echo "var javascript_array = ". $files . ";\n";

?>

<script type='text/javascript'>

</script>


<head>
<style>
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}

.grid {
/* Grid Fallback */
display: flex;
flex-wrap: wrap;

/* Supports Grid */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
}

.module {
/* Demo-Specific Styles */
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
width: 200px;

/* Flex Fallback */
margin-left: 5px;
margin-right: 5px;
flex: 1 1 200px;
}

/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
.module {
margin: 0;
}
}

</style>
</head>


<div class="grid" id="container">
<script>
//encode to JS array from PHP...
var jArray = <?php echo json_encode($files); ?>;

for (var c in jArray) {
var newElement = document.createElement('button');//edited
newElement.id = jArray[c];
newElement.className = "module";
newElement.href = "/secure/uploads/" + newElement.id;
newElement.innerHTML = jArray[c];

//newElement.document.createElement('button');
newElement.onclick = function(){
alert('pointed at '+ newElement.href);
}

document.getElementById('container').appendChild(newElement);

}

</script>
</div>
</body>
</html>

0

appendchild javascript php

Решение

Другие решения

РЕШИТЬ

Спасибо Tracker1,
Я изменился,

var jArray = <?php echo json_encode($files); ?>;

к ..

const jArray = <?php echo json_encode($files); ?>;

И это сработало так, как я хотел.

0

Источник

Accepted Answer

Просто на первый взгляд не копался, но «Новый» не известный элемент …

вместо: document.createElement('New');

пытаться: document.createElement('button');

//encode to JS array from PHP...
const jArray = <?php echo json_encode($files); ?>;
const container = document.getElementById('container');

// map to elements, then append to container
jArray
.map(file => {
var btn = document.createElement('button');
btn.id = file;
btn.className = "module";
btn.dataset.url = `/secure/uploads/${encodeURIComponent(file)}`;
btn.appendChild(document.createTextNode(file));
})
.forEach(btn => container.appendChild(btn));

// one event handler for the container, bubbling propagation
container.addEventListener('click', event => {
const btn = event && event.target;
const url = btn.dataset && ntn.dataset.url;
if (!url) return;
alert(url);
});

0