JS 接口到服务器文件夹答案

【问题标题】：JS interface to server folderJS 接口到服务器文件夹
【发布时间】：2018-07-20 19:54:36
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

CSS 与此过程无关。这只是介绍
您能否按照您的 PHP 文件中出现的顺序放置 PHP 和 Javascript，因为目前代码没有意义

标签： javascript php appendchild

【解决方案1】：

乍一看，没深入，但“新”不是已知元素……

而不是：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);
});

【讨论】：

【解决方案2】：

已解决

感谢 Tracker1，我变了，

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

到..

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

而且效果如我所愿。

【讨论】：