我正在使用烧瓶在 Pi 上托管的网站上工作。我有一个文件夹，我在其中不断添加 jpg 文件。我希望能够检查文件夹中的文件而无需刷新页面。在我使用 Javascript 显示文件的页面上，我想显示网站上的最新图像。每个图像都有一个类似 Rxxxxyyyyzzzz 的文件名，其中 x 和 y 是包含有关图像的一些信息的数字。zzzz 将只是一个增量数字，我想使用它。我希望这不能用正则表达式来做，问题是获取目录中所有文件的所有名称，所以我可以搜索它。我发现这个 php 应该为我做到这一点：var files = <?php $out = array();foreach (glob('file/*.jpg') as $filename) { $p = pathinfo($filename); $out[] = $p['filename'];}echo json_encode($out); ?>;在 Html 中，脚本的 src 应该是包含它的文件。像这样：<Script src="/templates/dir.php" language="javascript">//Code here</Script>但是当我这样做时，我收到了这个警告和一个错误：来自“ http://192.168.137.210:2000/static/dir.php ”的脚本已加载，即使其 MIME 类型（“application/octet-stream”）不是有效的 JavaScript MIME 类型。SyntaxError：预期的表达式，得到 '<' dir.php:3:12我真的不知道任何javascript或php，所以任何帮助表示赞赏
3 回答
慕盖茨4494581
TA贡献1850条经验 获得超11个赞
有几种方法可以实现您的既定目标，我使用不同的方法创建了两个工作版本。以下用于AJAX每隔几秒查询一次服务器，这可能是最简单的方法。任何长轮询 ajax 的问题在于它产生的流量量，但在某些情况下这不是问题。
在问题中，您展示了如何尝试将 PHP 脚本作为外部文件包含在 Javascript 标记中。这是可能的，但您需要Content-Type在 php 文件中指定标题（ astext/javascript或类似文件）。也就是说，PHP 运行一次，然后在调用任何客户端代码之前终止，因此所述 javascript(PHP) 文件的内容将是静态的 - 你将如何获得新的文件信息？
如果您使用 Ajax，则无需重新加载页面即可获得新的文件信息 - 您安排 ajax 函数每 X 秒运行一次，并使用回调函数来操作 DOM 并显示图像。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
ob_clean();
$path=explode( '/', $_SERVER['SCRIPT_NAME'] );
array_pop( $path );
$dir=__DIR__ . '/images/tmp'; # sub-directory of current working directory
$path=implode( '/', $path ); # suitable path for use in displaying images - root relative
/* scan the directory for jpg, jpeg and png images */
$col=preg_grep( '@(\.jpg|\.jpeg|\.png)@i', glob( $dir . '/*.*' ) );
/* Most recent file - sort array by comparing file modification timestamps */
usort( $col, function( $a, $b ){
return filemtime( $a ) < filemtime( $b ) ? 1 : 0;
});
/* tweak the sorted array to create suitable image paths */
array_walk( $col, function( &$item, $key ) use ( $path ){
$item=str_replace( __DIR__, $path, $item );
});
$payload=array(
'latest' => array_shift( $col ),
'oldest' => array_pop( $col )
);
exit( json_encode( $payload, JSON_UNESCAPED_SLASHES ) );
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Directory monitor using ajax</title>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const output=document.querySelector('output');
const image=document.querySelector('img');
const span=document.querySelector('span');
const loadimage=function( url ){
return new Promise( ( resolve, reject )=>{
let img=new Image();
img.onload=resolve( img );
img.onerror=reject( new Error( `Bogus!\n\nUnable to load ${url}` ) );
img.src=url;
});
};
const ajax=function(url,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback( this.response )
};
xhr.onerror=function(e){
alert(e)
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
xhr.send();
};
const ajaxcallback=function(r){
let json=JSON.parse( r );
if( json.latest!=null ){
loadimage( json.latest ).then( img=>{ image.src=img.src } ).catch( err=>{ alert(err) } );
}
};
/* anonymous, self-executing function to re-query every X seconds or whatever... */
(function(){
ajax( location.href, ajaxcallback )
setTimeout( arguments.callee, 1000 * 5 );
})();
});
</script>
<style></style>
</head>
<body>
<div>
<h1>Directory Monitor using ajax</h1>
<output></output>
<span><img /></span>
</div>
</body>
</html>
上面查看了current working directory调用图像的子目录，并通过定期将新文件复制到所述目录中进行了测试，只要新复制的文件将其Last Modified时间设置为复制操作的时间，这种方法就可以很好地工作 -filemtime毕竟获取文件修改时间。
/ monitor.php
└─
images/
└─
pic1.jpg
pic2.jpg
我尝试（并且更喜欢）的另一种方法EventSource是使用在无限循环中使用 PHP 的连接来查询您的目录并发回消息。这使用从 Javascript 到 PHP 脚本的单个连接，只要页面打开（或直到显式终止），该脚本就会保持打开状态
MYYA
TA贡献1868条经验 获得超4个赞
<Script src="/templates/dir.php" language="javascript">
您正在尝试在客户端执行 PHP 脚本。它行不通。JS 解释器遇到 PHP 开始标记时会抛出错误。
开满天机
TA贡献1786条经验 获得超13个赞
尝试使用 Ajax：
$.ajax({
url: "/templates/dir.php",
type: "POST",
success: function(output) {
console.log(output);
}
});
- 3 回答
- 0 关注
- 745 浏览
添加回答
举报
0/150
提交
取消