Question

我正在开发一个php web应用程序，其中一个文件列表（文本）以表格形式显示，其中包含用于查看，编辑或删除每个文件的按钮。

单击任何文件的视图按钮时，它应显示具有该特定文件内容的引导模式。到目前为止，我还没有实现这一目标。

我如何查看模态中的文件内容？谢谢。

编辑：我强烈怀疑它与读取目录中文件内容的php代码有关。我确信，我没有做正确的事情。具体而言，如何点击特定视图按钮显示特定文件。任何关于php代码的帮助都将受到高度赞赏。

 <?php
           $path='/path/to/files';
           $myDirectory=opendir($path);  

           if ($myDirectory==false)
     {
        echo "<br><br><div class='container'><div class='alert alert-danger text-center'><strong>Error!</strong> Failed to open Directory </div></div>\n";
         break;
     }

           //Gets each entry
           while($entryName=readdir($myDirectory))
           {
               $dirArray[]=$entryName;
           }     

           closedir($myDirectory);
           $indexCount=count($dirArray);
           sort($dirArray);


           //loops through the array of files 


                     foreach ($dirArray as $value) {
                       # code...

                       $text=file_get_contents('/path/to/files/'.$value);

                       $content=str_replace("\n","<br>",$text);
                         $conn[]=$content;

                     }



           for($index=0; $index < $indexCount; $index++)
           {

                     $name=$dirArray[$index];

                   if ( ( strpos($name,'.') === 0 ) | $name == "." | $name == ".." ){
                                        continue;
                        }

                     print("

                      <tr>

                      <td><span></span><a href='$name'> $name <a></td>
                      <td>$path</td>

                      <td class='text-nowrap'><button type='button' class = 'btn btn-default' data-toggle='modal' data-target='#myModal' > View </button></td>

                      <td><button class = 'btn btn-default' data-toggle='modal' data-target='#edit'> Edit </button> </td>

                      <td><a href='delete.php?name=".$name."'><button class = 'btn btn-default' > Delete </button></a></td>

                      </tr> 


                  ");



           }     






?>

 <div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
              <div class='modal-dialog' 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'></h4>
               </div> 
                <div class='modal-body'> 

                   <div> <?php 

                      //print_r($conn)  


                          foreach ($conn as $key => $value) {

                               echo $value;

                          }
                   ?> </div>
                   <div>

                   </div>                  

 </div>
                 <div class='modal-footer'>
                  <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>   
                     </div>   
                </div>   
                 </div>  
                </div>

Answer 1

要在浏览器中查看文件，您可以执行此操作，将iframe放入模态正文中，然后将模态的src属性设置为指向文件路径。

 <div class='modal-body'> 
   <iframe src="xxx.com/yourFile.txt" width="800px" height="600px" >
 </div>

这是一个演示相同内容的代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  View File
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" 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">Modal title</h4>
      </div>
      <div class="modal-body">
        <iframe src="https://wordpress.org/plugins/about/readme.txt" width="550px" height="400px" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

注意：在此示例中，由于跨源规则，您无法看到该文件，浏览器会将其停止。但是如果你给同一台服务器提供一条路径，那么你应该没有任何问题。

Answer 2

这不起作用，因为您正在复制表格中每一行的模态。它们都具有相同的ID，因此Bootstrap会对您要打开的内容感到困惑。您只需要在页面上的任何位置使用一个模态，并通过Javascript将数据传递给模态以更新其内容。以下是我从Bootstrap网站上获取的代码：

$('#myModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var file_contents = button.data('filecontents') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
      modal.find('.modal-body').html(file_contents)
})

然后将文件内容添加到数据属性：

<td class='text-nowrap'><button class = 'btn btn-default' data-toggle='modal' data-target='#myModal' data-filecontents="$content"> View </button></td>

参考： http://getbootstrap.com/javascript/#modals

如何在引导模式中查看文本文件？

2 个答案: