Question

我有以下代码从下拉菜单中选择我的图片。

<select name="Image2">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  echo "<option value='" . $filename . "'>".$filename."</option>";  }
    sort($files);
 ?>

</select>

有没有办法可以预览所选图像？我试过这样的话：

<img src="<?php echo $filepath.$filename ?>" />

然而，它并没有显示任何内容

Answer 1

试试这个

  <script>
       $('#attribute119').change(function () {
    var path=$('#filepath').val();
      $('#main').attr('src', path+'/'+ $('#attribute119 :selected').text() );
    });
    </script>

<img src="mainimage.jpg" id="main">
<select name="Image2" id="attribute119">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  echo "<option value='" . $filename . "'>".$filename."</option>";  }
    sort($files);
 ?>

</select> 
<input type=hidden id="filepath" value="<?php echo $filepath ?>"/>

Answer 2

可能你应该试试这个.. 这可以帮助你..

<select name="Image2" onChange="showImage(this.value)">
    <option value="" selected="selected"></option>
  <?php 
     $dir = "../files/images/product";//your path
    $dh  = opendir($dir);
    while (false !== ($filename = readdir($dh))) {
        $files[] = $filename;
  echo "<option value='".$dir ."/". $filename . "'>" . $filename . "</option>";  }
    sort($files);
 ?>

</select>  

<div id="image_div"></div> 

<script type="text/javascript">
 function showImage(value)
 {
  var img = "<img src='"+value+"' />";
  document.getElementById('image_div').innerHTML = img;
 }
</script>

如何从下拉菜单中选择图像后显示图像？

2 个答案: