我正在开发一个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'>×</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">×</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>
注意:在此示例中,由于跨源规则,您无法看到该文件,浏览器会将其停止。但是,如果您提供指向同一服务器的路径,那么您应该没有任何问题。