Question

我正在制作自动文件索引器。我的代码很快将包含视频播放器，音乐播放器等，因此您可以查看文件。但是，不想每次页面重新加载时都重新加载所有这些元素，所以我想使用AJAX动态加载文件列表。

这是取回文件的PHP部分（用户不会直接访问它）：

<?php
$files = glob("*");
foreach ($files as $filename) {
$path = substr(realpath($filename), 13);
$type = pathinfo($filename)['extension'];
if($type == '7z' || $type == 'bz' || $type == 'gz' || $type == 'rar' || $type == 'tar' || $type == 'zip' || $type == 'box' || $type == 'deb' || $type == 'rpm') {$type = 'compressed';}
elseif($type == 'aac' || $type == 'flac' || $type == 'mid' || $type == 'midi' || $type == 'mp3' || $type == 'ogg' || $type == 'wma' || $type == 'wav') {$type = 'music';}
elseif($type == 'c' || $type == 'class' || $type == 'cpp' || $type == 'css' || $type == 'erb' || $type == 'htm' || $type == 'html' || $type == 'java' || $type == 'js' || $type == 'php' || $type == 'pl' || $type == 'py' || $type == 'rb' || $type == 'xhtml' || $type == 'xml' || $type == 'cfg' || $type == 'ini' || $type == 'log' || $type == 'md' || $type == 'rtf') {$type = 'code';}
elseif($type == 'csv' || $type == 'doc' || $type == 'docx' || $type == 'odt' || $type == 'pdf' || $type == 'xls' || $type == 'xlsx' || $type == 'txt' || $type == 'cfg' || $type == 'ini' || $type == 'log' || $type == 'md' || $type == 'rtf') {$type = 'doc';}
elseif($type == 'avi' || $type == 'flv' || $type == 'mkv' || $type == 'mov' || $type == 'mp4' || $type == 'mpeg' || $type == 'mpg' || $type == 'ogv' || $type == 'webm' || $type == 'wmv' || $type == 'swf') {$type = 'video';}
elseif($type == 'eot' || $type == 'otf' || $type == 'ttf' || $type == 'woff') {$type = 'font';}
elseif($type == 'bmp' || $type == 'gif' || $type == 'jpg' || $type == 'jpeg' || $type == 'png' || $type == 'psd' || $type == 'tga' || $type == 'tiff' || $type == 'ai' || $type == 'drw' || $type == 'eps' || $type == 'ps' || $type == 'svg') {$type = 'image';}
elseif($type == 'app' || $type == 'bat' || $type == 'com' || $type == 'exe' || $type == 'jar' || $type == 'msi' || $type == 'vb' || $type == 'bat' || $type == 'cmd' || $type == 'sh') {$type = 'executable';}
elseif($type == 'gam' || $type == 'nes' || $type == 'rom' || $type == 'sav' || $type == 'cue' || $type == 'bin') {$type = 'rom';}
elseif($type == '') {$type = 'folder';}
else{ $type = 'file'; }
echo "<tr><td><img src=\"/Home/RESSOURCES/ICONS/{$type}.png\"></td><td><a href=\"#\" onclick=\"clickDoc('{$path}')\">{$filename}</a></td><td><a href=\"#info\" onclick=\"loadDoc('{$path}')\"><img src=\"/Home/RESSOURCES/ICONS/info.png\"></a></td></tr>";
}
?>

这是用户将直接访问的代码。它从上方的“ / Home /”中加载PHP页面

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/Home/RESSOURCES/style.css">
</head>
<body>
<table>
<tr>
<th>X</th>
<th style="width:100%">Nom du fichier</th>
<th>X</th>
</tr>
<tr><td><img src="/Home/RESSOURCES/ICONS/up.png"></td><td><a href="..">Dossier parent</a></td><td></td></tr>
<body onload="javascript:clickDoc()">
<button type="button" onclick="clickDoc('/Home/')">Home</button>
</table>
<script>
function clickDoc(url) {
  if (url === undefined) {
    url = "/Home/";
  }
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
</script>
<div id="content"></div>
</body>
</html>

因此，使用AJAX，无法加载我的PHP（位于/ Home /）。

->它显示文件和文件夹的列表（是！），但是存在两个主要问题：

CSS不会应用于已加载的内容
我可以浏览槽文件夹，而不必每次都重新加载整个页面，这正是我想要的。但是，当我单击一个文件时，AJAX试图像打开网页一样打开该文件。因此，如果单击名为“ dummy.zip”的文件，则AJAX将加载空白页面。

如何解决这两个问题？干杯。

导航槽文件夹并使用AJAX下载文件？

0 个答案: