猿问

使用Javascript获取本地目录中文件的所有文件名

我正在使用烧瓶在 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，所以任何帮助表示赞赏


肥皂起泡泡
浏览 790回答 3
3回答

慕盖茨4494581

有几种方法可以实现您的既定目标，我使用不同的方法创建了两个工作版本。以下用于AJAX每隔几秒查询一次服务器，这可能是最简单的方法。任何长轮询 ajax 的问题在于它产生的流量量，但在某些情况下这不是问题。在问题中，您展示了如何尝试将 PHP 脚本作为外部文件包含在 Javascript 标记中。这是可能的，但您需要Content-Type在 php 文件中指定标题（ astext/javascript或类似文件）。也就是说，PHP 运行一次，然后在调用任何客户端代码之前终止，因此所述 javascript(PHP) 文件的内容将是静态的 - 你将如何获得新的文件信息？如果您使用 Ajax，则无需重新加载页面即可获得新的文件信息 - 您安排 ajax 函数每 X 秒运行一次，并使用回调函数来操作 DOM 并显示图像。<?php&nbsp; &nbsp; if( $_SERVER['REQUEST_METHOD']=='POST' ){&nbsp; &nbsp; &nbsp; &nbsp; ob_clean();&nbsp; &nbsp; &nbsp; &nbsp; $path=explode( '/', $_SERVER['SCRIPT_NAME'] );&nbsp; &nbsp; &nbsp; &nbsp; array_pop( $path );&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $dir=__DIR__ . '/images/tmp';&nbsp; &nbsp;#&nbsp; &nbsp;sub-directory of current working directory&nbsp; &nbsp; &nbsp; &nbsp; $path=implode( '/', $path );&nbsp; &nbsp; #&nbsp; &nbsp;suitable path for use in displaying images - root relative&nbsp; &nbsp; &nbsp; &nbsp; /* scan the directory for jpg, jpeg and png images */&nbsp; &nbsp; &nbsp; &nbsp; $col=preg_grep( '@(\.jpg|\.jpeg|\.png)@i', glob( $dir . '/*.*' ) );&nbsp; &nbsp; &nbsp; &nbsp; /* Most recent file - sort array by comparing file modification timestamps */&nbsp; &nbsp; &nbsp; &nbsp; usort( $col, function( $a, $b ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return filemtime( $a ) < filemtime( $b ) ? 1 : 0;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; /* tweak the sorted array to create suitable image paths */&nbsp; &nbsp; &nbsp; &nbsp; array_walk( $col, function( &$item, $key ) use ( $path ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $item=str_replace( __DIR__, $path, $item );&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $payload=array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'latest'&nbsp; &nbsp; =>&nbsp; array_shift( $col ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'oldest'&nbsp; &nbsp; =>&nbsp; array_pop( $col )&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; exit( json_encode( $payload, JSON_UNESCAPED_SLASHES ) );&nbsp; &nbsp; }?><!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset='utf-8' />&nbsp; &nbsp; &nbsp; &nbsp; <title>Directory monitor using ajax</title>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.addEventListener('DOMContentLoaded',()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const output=document.querySelector('output');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const image=document.querySelector('img');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const span=document.querySelector('span');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const loadimage=function( url ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return new Promise( ( resolve, reject )=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let img=new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onload=resolve( img );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.onerror=reject( new Error( `Bogus!\n\nUnable to load ${url}` ) );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.src=url;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const ajax=function(url,callback){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let xhr=new XMLHttpRequest();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.onload=function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( this.status==200 && this.readyState==4 )callback( this.response )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.onerror=function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(e)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.open( 'POST', url, true );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.send();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const ajaxcallback=function(r){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let json=JSON.parse( r );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( json.latest!=null ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loadimage( json.latest ).then( img=>{ image.src=img.src } ).catch( err=>{ alert(err) } );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* anonymous, self-executing function to re-query every X seconds or whatever... */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ajax( location.href, ajaxcallback )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout( arguments.callee, 1000 * 5 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; <style></style>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Directory Monitor using ajax</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <output></output>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span><img /></span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body></html>上面查看了current working directory调用图像的子目录，并通过定期将新文件复制到所述目录中进行了测试，只要新复制的文件将其Last Modified时间设置为复制操作的时间，这种方法就可以很好地工作 -filemtime毕竟获取文件修改时间。/ monitor.php└─&nbsp; &nbsp;images/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└─&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pic1.jpg&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pic2.jpg我尝试（并且更喜欢）的另一种方法EventSource是使用在无限循环中使用 PHP 的连接来查询您的目录并发回消息。这使用从 Javascript 到 PHP 脚本的单个连接，只要页面打开（或直到显式终止），该脚本就会保持打开状态
0

MYYA

<Script src="/templates/dir.php" language="javascript">您正在尝试在客户端执行 PHP 脚本。它行不通。JS 解释器遇到 PHP 开始标记时会抛出错误。
0

开满天机

尝试使用 Ajax：&nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: "/templates/dir.php",&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; success: function(output) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(output);&nbsp; &nbsp; &nbsp; }&nbsp; });
0
随时随地看视频慕课网APP

相关分类

PHP
php如何把参数放在Http Request Heade？？？？ 1 回答
我要回答