0

我通过搜索获得的此代码..

    <html>
<head>
<title>Get url for address bar</title>
<script>
    function display(folder,img_name) 
    {
        var src = "http://localhost/UPLOADER/images/"+folder+"/"+img_name;
        show_image("http://localhost/UPLOADER/images/"+folder+"/"+img_name, 276,110, "Img");
    }


    function show_image(src, width, height, alt) 
    {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;
        document.body.appendChild(img);
    }
</script>
</head>
<body>
<input type="text" name="image" value="" style="margin-top: 4px;" placeholder="Image_name" />
<button onclick="display('a','access')">DISPLAY IMAGE</button>

</body>
</html>

我从站点为 jquery获取的这段代码运行良好，但我认为我在代码中犯了一些错误，当它显示时很难抓住错误。未定义的图像和功能显示。

我想添加它以动态选择图像

<?php
     $img_name=$_POST['image'];
     $folder = substr($img_name, 0, 1);
?>
<button onclick="display('$folder','$img_name')">DISPLAY IMAGE</button>

对于扩展，我使用 .htaccessOptions +MultiViews 谢谢

4

1 回答 1

0

好的，这个问题有很多解决方案，将其更改为对 php 页面的 ajax 调用以获取图像/图像将是一个，一个非常简单的解决方案就是这样......

<?php
$image = (isset($_REQUEST['image'])) ? $_REQUEST['image'] : false;
$folder = ($image) ? substr($image, 0, 1) : false;
?>
<html>
<head>
<title>Get url for address bar</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    var image = '<?php echo ($image) ? $image : "false"; ?>';
    var folder = '<?php echo ($folder) ? $folder : "false"; ?>';
    var extension = '.jpg';
    function DISPLAY(folder,img_name, imgExt) {
        var finalExt = (typeof imgExt != 'undefined') ? imgExt : extension;
        if(img_name != 'false' && folder != 'false') {
            show_image("http://localhost/UPLOADER/images/"+folder+"/"+img_name+finalExt, 276,110, "Img");
        } else {
            console.log("looks like something was undefined, here's the values:");
            console.log(folder);
            console.log(img_name);
    } 
    }


    function show_image(src, width, height, alt) 
    {
        var img = document.createElement("img");
        img.src = src;
        img.width = width;
        img.height = height;
        img.alt = alt;
        document.body.appendChild(img);
    }
//if using jquery
$(document).ready(function() {
    //you could also add logic here to see if values are not 'false' and run function
    DISPLAY(folder, image);
});
</script>
</head>
<body>
<form action="" method="POST">
<input type="text" name="image" value="" style="margin-top: 4px;" placeholder="Image_name" />
<button>DISPLAY IMAGE</button>
</form>
</body>
</html>
于 2013-07-10T08:58:28.367 回答