我正在使用燒瓶在 Pi 上托管的網(wǎng)站上工作。我有一個(gè)文件夾，我在其中不斷添加 jpg 文件。我希望能夠檢查文件夾中的文件而無(wú)需刷新頁(yè)面。在我使用 Javascript 顯示文件的頁(yè)面上，我想顯示網(wǎng)站上的最新圖像。每個(gè)圖像都有一個(gè)類(lèi)似 Rxxxxyyyyzzzz 的文件名，其中 x 和 y 是包含有關(guān)圖像的一些信息的數(shù)字。zzzz 將只是一個(gè)增量數(shù)字，我想使用它。我希望這不能用正則表達(dá)式來(lái)做，問(wèn)題是獲取目錄中所有文件的所有名稱(chēng)，所以我可以搜索它。我發(fā)現(xiàn)這個(gè) php 應(yīng)該為我做到這一點(diǎn)：var files = <?php $out = array();foreach (glob('file/*.jpg') as $filename) { $p = pathinfo($filename); $out[] = $p['filename'];}echo json_encode($out); ?>;在 Html 中，腳本的 src 應(yīng)該是包含它的文件。像這樣：<Script src="/templates/dir.php" language="javascript">//Code here</Script>但是當(dāng)我這樣做時(shí)，我收到了這個(gè)警告和一個(gè)錯(cuò)誤：來(lái)自“ http://192.168.137.210:2000/static/dir.php ”的腳本已加載，即使其 MIME 類(lèi)型（“application/octet-stream”）不是有效的 JavaScript MIME 類(lèi)型。SyntaxError：預(yù)期的表達(dá)式，得到 '<' dir.php:3:12我真的不知道任何javascript或php，所以任何幫助表示贊賞
3 回答
慕蓋茨4494581
TA貢獻(xiàn)1850條經(jīng)驗(yàn) 獲得超11個(gè)贊
有幾種方法可以實(shí)現(xiàn)您的既定目標(biāo)，我使用不同的方法創(chuàng)建了兩個(gè)工作版本。以下用于AJAX每隔幾秒查詢(xún)一次服務(wù)器，這可能是最簡(jiǎn)單的方法。任何長(zhǎng)輪詢(xún) ajax 的問(wèn)題在于它產(chǎn)生的流量量，但在某些情況下這不是問(wèn)題。
在問(wèn)題中，您展示了如何嘗試將 PHP 腳本作為外部文件包含在 Javascript 標(biāo)記中。這是可能的，但您需要Content-Type在 php 文件中指定標(biāo)題（ astext/javascript或類(lèi)似文件）。也就是說(shuō)，PHP 運(yùn)行一次，然后在調(diào)用任何客戶(hù)端代碼之前終止，因此所述 javascript(PHP) 文件的內(nèi)容將是靜態(tài)的 - 你將如何獲得新的文件信息？
如果您使用 Ajax，則無(wú)需重新加載頁(yè)面即可獲得新的文件信息 - 您安排 ajax 函數(shù)每 X 秒運(yùn)行一次，并使用回調(diào)函數(shù)來(lái)操作 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調(diào)用圖像的子目錄，并通過(guò)定期將新文件復(fù)制到所述目錄中進(jìn)行了測(cè)試，只要新復(fù)制的文件將其Last Modified時(shí)間設(shè)置為復(fù)制操作的時(shí)間，這種方法就可以很好地工作 -filemtime畢竟獲取文件修改時(shí)間。
/ monitor.php
└─
images/
└─
pic1.jpg
pic2.jpg
我嘗試（并且更喜歡）的另一種方法EventSource是使用在無(wú)限循環(huán)中使用 PHP 的連接來(lái)查詢(xún)您的目錄并發(fā)回消息。這使用從 Javascript 到 PHP 腳本的單個(gè)連接，只要頁(yè)面打開(kāi)（或直到顯式終止），該腳本就會(huì)保持打開(kāi)狀態(tài)
MYYA
TA貢獻(xiàn)1868條經(jīng)驗(yàn) 獲得超4個(gè)贊
<Script src="/templates/dir.php" language="javascript">
您正在嘗試在客戶(hù)端執(zhí)行 PHP 腳本。它行不通。JS 解釋器遇到 PHP 開(kāi)始標(biāo)記時(shí)會(huì)拋出錯(cuò)誤。
開(kāi)滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
嘗試使用 Ajax：
$.ajax({
url: "/templates/dir.php",
type: "POST",
success: function(output) {
console.log(output);
}
});
- 3 回答
- 0 關(guān)注
- 783 瀏覽
添加回答
舉報(bào)
0/150
提交
取消