2017-02-22 21 views
1

我有图像的目录等HTML/JavaScript/PHP:如何获取网页按钮以使图像在目录中循环?

/Web/ex1_1.png 
/Web/ex1_2.png 
/Web/ex2_1.png 

和我已经写HTML和JavaScript设置两个帆布元件,一个用于ex1_1.png,一个用于ex2_1.png,并与按钮成对每个画布元件,使得当所述首先点击画布擦除并重新绘制ex1_2.png。我希望在下一次点击时让程序认识到序列中没有下一个图像,然后循环回到开头ex1_1.png。我还没有用这个问题的其他方法取得成功,所以我现在试图让PHP扫描目录并提供一个文件列表。但是,我不明白如何让PHP发送JavaScript的信息。在我的JavaScript文件我已经包括

的JavaScript

var req = new XMLHttpRequest(); 
req.open("get", "../php/request.php", true); 
req.send() 
console.log(req); 

,我有一个名为request.php

PHP PHP文件

<?php 
    echo json_encode(scandir("../Web/")); 
?> 

控制台打印漂亮空看着XMLHttpRequest,我确信我彻底误解了一些pri这些东西是如何相互关联的,但直到昨天,我还没有使用PHP的经验,也没有我能找到的资源告诉我如何实现这一点。

回答

1

我以前的代码片段丢失了;在JavaScript块中关闭之后?>。对于这种疏忽感到抱歉。

我决定测试我的新解决方案,现在一切都很稳固。因为这个问题很复杂,只有足够的信息来解决早期问题。请修改您的标题,如“从远程目录中的图像文件阵列创建json字符串”或类似内容。有关任何后续问题的支持,请发布一个新的非复合问题。

我有一个文件名为canvaswriter.php:

<?php 
/* *** Server structure used during testing: 
/test 
    /folder 
     canvaswriter.php 
     request.php 
    /Web 
     ex1_1.png 
     ex1_2.png 
     ex2_1.png 
*** */ 

$path="../Web/"; 
include("request.php"); 
?> 
<script type="text/javascript"> 
    var images=<?php echo json_encode($pngs); ?>; 
    console.log(images); 
</script> 

我不会亲自写一个包括什么本质上是代码从服务器收获文件的两行,但您的特定情况下,你可能想要处理包含的所有javascript。我不知道剩下的魔法将在哪里发生。

这里是request.php:

<?php 
echo "Build array of .png images from directory files:<br>"; 

//$files=array_diff(scandir($path),array('..','.')); // no filetype filter 
chdir($path); // set correct directory for glob() 
$pngs=glob("*.png"); // with filename pattern filter 

print_r($pngs); 
?> 

的页面将显示:从png格式目录中的文件的图像的

构建阵列:

阵列([0] => ex1_1 .png [1] => ex1_2.png [2] => ex2_1。PNG)

的源代码会显示:

Build array of .png images from directory files:<br> 
Array (
    [0] => ex1_1.png 
    [1] => ex1_2.png 
    [2] => ex2_1.png 
) 
<script type="text/javascript"> 
    var images=["ex1_1.png","ex1_2.png","ex2_1.png"]; 
    console.log(images); 
</script> 

并在控制台显示:

["ex1_1.png", "ex1_2.png", "ex2_1.png"] 

最后,我不明白你为什么写这些影像到帆布。你是否将这些.png图像转换为base64,然后将它们写入画布?是否有理由不能按原样使用它们并循环使用它们?看起来像不必要的额外工作,但我又没有所有的信息。我希望这能够充分解决您的问题,并帮助您继续实施项目。

+0

如果您需要模式匹配来将文件过滤为只有.png图像,那么glob()可能比scandir()更有帮助。 – mickmackusa

+0

这看起来像我想要的,但当我使用它时,我得到一个错误,说它期望一个快递,但得到了一个<。 – Addem

+0

不知道它是否重要,但我有脚本在外部文件。我只输入从'var ...'到'... images)的部分;' – Addem

1

你可以试试这个代码 -

PHP(request.php)

$files = scandir("../Web/"); 
$pngOrJpg = []; 
foreach ($files as $key => $value) { 
    if (stripos($value,'.jpg') || stripos($value,'.png')) { 
     $pngOrJpg[] = $value; 
    } 
} 
echo json_encode($pngOrJpg); 

注:只得到.jpg.png类型的图像阵列。

的Javascript

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     console.log(xhttp.responseText); 
    } 
}; 
xhttp.open("GET", "../php/request.php", true); 
xhttp.send(); 

从上面的代码中,你可以得到JSON阵列状 -

['ex1_1.png','ex1_2.png','ex2_1.png'] 

现在,使用和处理与您的代码这个JSON数组。

+0

因此,这为我避免了错误,但在控制台中没有提供任何图像。我怀疑这个问题是我发送不同功能的目录。我有'/ Web /'中的图像和HTML,'/ js /'中的JavaScript以及'/ php /'中的PHP。 – Addem

+0

使用脚本的完整路径扫描目录映像。例如: 'scandir(“/ var/www/html/Web /”);'@Addem –

+0

浏览Server中的request.php。例如:来自浏览器的'http:// localhost/Web/request.php'。并确保'scandir()'函数获得正确的路径。同时检查'xhttp.open(“GET”,“../php/request.php”,true);'正在请求'request.php'。 @Addem –