如何查看引導模式下的文本文件？

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

這不起作用，因爲您正在複製表格中每一行的模態。他們都有相同的ID，因此Bootstrap會對你想打開的內容感到困惑。您只需要在頁面上的任意位置使用一種模式，並通過Javascript將數據傳遞到模式以更新其內容。下面是我從引導網站所採取的代碼：

$('#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

Answer 2

爲了查看瀏覽器中的文件，你可以做到這一點，把一個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>

注：在這個例子中，你不能看到，因爲跨域規則的文件，瀏覽器停止。但是，如果你給你的同一臺服務器的路徑，那麼你應該沒有任何問題。