Question

我正在尝试创建一个按钮打开引导模式的表单，然后单击模式中的图像将图像的文件名（没有扩展名最好）发送回表单。

模态对话框中的图像是从PHP文件夹加载的。

已经有很长一段时间了，并且无法弄清楚如何在PHP中调用图像时这样做:( 提前谢谢。

编辑：图像文件名应传递给表单中的textinput。

模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"     
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"   
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Choose a picture</h4>
</div>
<div class="modal-body">
<div class="row">
  <div class="col-lg-12">
      <h1 class="page-header">Images</h1>
  </div>

<?php
 $files = glob("img/*.*");
  for ($i=0; $i<count($files); $i++) {
      $image = $files[$i];
      echo '
      <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" href="#">
            <img  class="img-responsive" src="'.$image .'" />
        </a>

      </div>

      '
      ;

  }
?>

</div>
</div>
</div>
</div>
</div>

主页代码：

 <button type="button" class="btn btn-info btn-lg" 
 data-toggle="modal" data-target="#myModal">Open Modal
 </button>
 <div class="form-group">
 <label class="col-md-4 control-label" for="textinput">Text     
 Input</label>  
 <div class="col-md-4">
     <input id="textinput" name="textinput" placeholder="" class="form-  
     control input-md" type="text">
 </div>
</div>

Answer 1

您可以使用cookies：

<script>
function vars() {
   var x = document.cookie; 
    // alert(x); // uncomment this to check value
    // return x;  
    document.getElementById('textinput').value = x.split(';')[0].split('=')[1].split('.')[0];  // this give you the file name without extension in textbox   
}
function setcookies(img){
    document.cookie = "selected_img="+ img.split('/').pop();
}
</script>

php部分将是这样的：

<?php
 $files = glob("img/*.*");
  for ($i=0; $i<count($files); $i++) {
      $image = $files[$i];
      echo '
      <div class="col-lg-3 col-md-4 col-xs-6 thumb">
        <a class="thumbnail" href="#">
            <img  class="img-responsive" src="'.$image .'" onclick="setcookies(this.src);vars();" />
        </a>

      </div>

      '
      ;

  }
?>

关闭你的模态后，你可以通过调用vars（）函数获得你的var。例如，在主页面中有这个。

<button type="button" class="btn btn-info btn-lg" 
  onclick="vars()" >vars
 </button>

或者您可以在设置cookie之后立即调用vars（）：

<img  class="img-responsive" src="'.$image .'" onclick="setcookies(this.src);vars()" />

如果您只想使用图像名称一次而不是将其存储在某处以供进一步使用，则可以使用此功能：

<script>
function send(img){
    document.getElementById('textinput').value = img.split('/').pop().split('.')[0];;
}
</script>
<img  class="img-responsive" src="'.$image .'" onclick="send(this.src);" />

请选择一个更适合您的目的。

如何通过单击bootstrap模式中的图像返回主页来传递值

1 个答案: