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


How do I view text files in a bootstrap modal?

我正在开发一个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>

这不起作用,因为您正在为表中的每一行复制模态。它们都具有相同的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

为了在浏览器中查看文件,您可以执行此操作,将 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>

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