PHP鼠标滚轮滚动翻看文件夹图像，路径问题

Question

做了一个网页里读取服务器文件夹（这个文件夹路径是变动的，是从数据库里读取出来的，数据库读取没有问题，大家忽略）里的jpg图像组（图像组以0.jpg开始编号，最后一个图像编号不确定，一般在100以内）的页面。现在需要用鼠标滚轮滚动翻看图片。经网友解决了一部分，但是现在只能翻看固定路径下图像，把固定路径替换成变量后，看不了图，经查看，路径里的“/”变成了带%的其它字符。
尤其是：

htmlStr += '<img src="<?php echo $zhuanimgpath; ?>/' + i + '.jpg" width="800px" height="600px" id="pic' + i + '" style="display:' + (i == 1 ? 'block' : 'none') + ';">';

这里的src里的固定路径，替换成$zhuanimgpath就不行了。
完整代码如下：

$row=mysql_fetch_assoc($rsdb);
      $imgpath=str_replace("$","\\",$row['imgPath4']);//获取路径地址并转换成路径
      $zhuanimgpath=iconv("utf-8","GBK",$imgpath);//转换路径编码，以识别中文目录
$imgnum = 0;
//$path = $zhuanimgpath; //当前目录
$handle = opendir($zhuanimgpath);
while (false !== ($file = readdir($handle))) {  //遍历该php文件所在目录
    list($filesname,$kzm)=explode(".",$file); //获取扩展名
    if($kzm=="gif" or $kzm=="jpg" or $kzm=="JPG") { //文件过滤
        if (!is_dir('./'.$file)) {  //文件夹过滤
            $imgnum = $imgnum + 1;
        }
    }
}

<div id="picBox"></div>

<script>
    var imgnum = <?php echo $imgnum; ?> ; //图片总数
    var nowPic = 1;
    // 是否展示下一张图片
    let nextPicFlag = true;

    function MouseWheel(e) {
        if (nextPicFlag) {
            nextPicFlag = false;

            var pic;
            e = e || window.event;
            for (i = 1; i <= imgnum; i++) {
                if (i == nowPic) {
                    pic = document.getElementById("pic" + i);
                    pic.style.display = "block";
                } else {
                    pic = document.getElementById("pic" + i);
                    pic.style.display = "none";
                }
            }

            if (e.wheelDelta) { //IE
                if (e.wheelDelta < 0) {
                    if (nowPic >= imgnum) {
                        nowPic = 1;
                    } else {
                        nowPic++;
                    }
                } else {
                    if (nowPic <= 1) {
                        nowPic = imgnum;
                    } else {
                        nowPic--;
                    }
                }
            } else if (e.detail) { //Firefox
                if (e.detail > 0) {
                    if (nowPic >= imgnum) {
                        nowPic = 1;
                    } else {
                        nowPic++;
                    }
                } else {
                    if (nowPic <= 1) {
                        nowPic = imgnum;
                    } else {
                        nowPic--;
                    }
                }
            } else { // 其他情况
                if (nowPic >= imgnum) {
                    nowPic = 1;
                } else {
                    nowPic++;
                }
            }

            // 设置延时，不让图片滚动太快，setTimeout的第2个参数为延时时间，单位为毫秒
            setTimeout(function() {
                nextPicFlag = true;
            }, 5);
        }
    }

    /*Firefox注册事件*/
    if (document.addEventListener) {
        document.addEventListener("DOMMouseScroll", MouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = MouseWheel; //IE/Opera/Chrome

    /**
     * 渲染图片
     * @param {Object} imgnum 图片数量
     */
    function renderPicBox(imgnum) {
        let htmlStr = "";
        for (var i = 1; i <= imgnum; i++) {
            htmlStr += '<img src="<?php echo $imgpath; ?>/' + i + '.jpg" width="800px" height="600px" id="pic' + i + '" style="display:' + (i == 1 ? 'block' : 'none') + ';">';
        }

        let picBoxEle = document.getElementById("picBox");
        picBoxEle.innerHTML = htmlStr;
    }
    renderPicBox(imgnum);
</script>

Answer 1

引用chatgpt部分指引作答：
在代码中，变量 $zhuanimgpath 作为图片路径，其中包含中文字符，需要先进行编码转换。但是，当前代码中的编码转换方法 iconv("utf-8","GBK",$imgpath) 转换后的路径可能包含特殊字符，比如 / 被转换成 %2F。这会导致图片路径出错。

一种解决方法是在编码转换前先使用 urlencode 方法对路径进行编码，然后再使用 urldecode 方法进行解码。这样可以保证路径中的所有字符都能正确传递，而不会被误解析成特殊字符。

修改代码如下：

$row=mysql_fetch_assoc($rsdb);
$imgpath = str_replace("$","\\",$row['imgPath4']); //获取路径地址并转换成路径
$imgpath = urlencode($imgpath); // 对路径进行编码
$zhuanimgpath = iconv("utf-8","GBK",urldecode($imgpath)); // 转换路径编码，以识别中文目录
$imgnum = 0;
//$path = $zhuanimgpath; //当前目录
$handle = opendir($zhuanimgpath);
while (false !== ($file = readdir($handle))) {  //遍历该php文件所在目录
    list($filesname,$kzm)=explode(".",$file); //获取扩展名
    if($kzm=="gif" or $kzm=="jpg" or $kzm=="JPG") { //文件过滤
        if (!is_dir('./'.$file)) {  //文件夹过滤
            $imgnum = $imgnum + 1;
        }
    }
}