Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片

① 查看文件内容，如果文件是图片类型，点击直接查看图片；

② 如果不是图片类型，显示文件中的内容；

③ 使用 jQuery UI 中的 Dialog 显示图片

a.引入：

<script src="jquery-1.8.3.min.js"></script>

<script src="jquery-ui-1.11.3/jquery-ui.min.js"></script>

<link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.min.css" />

b.通过文件扩展名（或者MIME 类型）来判断是否是图片文件

index.php：

<?php

require 'dir.func.php';

require 'file.func.php';

require 'common.func.php';

$path = 'file';

$info = readDirectory($path);

$act = @$_REQUEST['act'];

$filename = @$_REQUEST['filename'];

//跳转变量

$redirect = "index.php?path={$path}";

if($act == 'createFile'){

    //创建文件

    $mes = createFile($path.'/'.$filename);

    alertMes($mes,$redirect);

}else if($act == 'showContent'){

//查看文件内容

    $content=file_get_contents($filename);

    //echo "<textarea readonly='readonly' cols='100' rows='10'>{$content}</textarea>";

    //高亮显示PHP代码

    //高亮显示字符串中的PHP代码

    if(strlen($content)){

    $newContent=highlight_string($content,true);

    //高亮显示文件中的PHP代码

    //highlight_file($filename);

    $str=<<<EOF

    <table width='100%' bgcolor='pink' cellpadding='5' cellspacing="0" >

        <tr>

            <td>$newContent</td>

        </tr>

    </table>

EOF;

        echo $str;

    }else{

        alertMes("文件没有内容，请编辑再查看！",$redirect);

    }

}else if($act == 'editContent'){

    $content = file_get_contents($filename);

    $str=<<<EOF

    <form action='index.php?act=doEdit' method='post'>

    <textarea name='content'  cols='100' rows='10'>$content</textarea></br>

    <input type='hidden' name='filename' value='{$filename}'>

    <input type='submit' value='修改文件内容'>

    </form>

EOF;

    echo $str;

}else if($act == 'doEdit'){

    //修改文件内容

    $content = $_POST['content'];

    if(file_put_contents($filename, $content)){

        $mes = '文件修改成功';

    }else if(!$content){

        $mes = '文件内容被清空';

    }else{

        $mes = '文件修改失败';

    }

    alertMes($mes,$redirect);

}

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" href="cikonss.css" />

<link rel="stylesheet" href="common.css" />

<script src="jquery-1.8.3.min.js"></script>

<script src="jquery-ui-1.11.3/jquery-ui.min.js"></script>

<link rel="stylesheet" href="jquery-ui-1.11.3/jquery-ui.min.css" />

</head>

<body>

<div id="showDetail" style="display:none"><img src="" alt="" id="showImg"></div>

<h1>在线文件管理器</h1>

<div id="top">

    <ul id="navi">

        <li><a href="index.php" title="主目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-home"></span></span></a></li>

        <li><a href="#" onclick="show('createFile')" title="新建文件" ><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-file"></span></span></a></li>

        <li><a href="#" title="新建文件夹"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-folder"></span></span></a></li>

        <li><a href="#" title="上传文件"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-upload"></span></span></a></li>

        <li><a href="#" title="返回上级目录"><span style="margin-left: 8px; margin-top: 0px; top: 4px;" class="icon icon-small icon-square"><span class="icon-arrowLeft"></span></span></a></li>

    </ul>

</div>

<form action="index.php" method="post" enctype="multipart/form-data">

<table width='100%' border='1' cellpadding="5" cellspacing="0" bgcolor="#abcdef" align="center">

    <tr id="createFolder"  style="display:none;">

        <td>请输入文件夹名称</td>

        <td >

            <input type="text" name="dirname" />

            <input type="hidden" name="path"  value="<?php echo $path;?>"/>

            <input type="submit"  name="act"  value="创建文件夹"/>

        </td>

    </tr>

    <tr id="createFile"  style="display:none;">

        <td>请输入文件名称</td>

        <td >

            <input type="text"  name="filename" />

            <input type="hidden" name="path" value="<?php echo $path;?>"/>

            <input type="hidden" name='act' value='createFile'/>

            <input type="submit" value="创建文件" />

        </td>

    </tr>

    <tr id="uploadFile" style="display:none;">

        <td >请选择要上传的文件</td>

        <td ><input type="file" name="myFile" />

            <input type="submit" name="act" value="上传文件" />

        </td>

    </tr>

    <tr align="center">

        <td>编号</td>

        <td>名称</td>

        <td>类型</td>

        <td>大小</td>

        <td>可读</td>

        <td>可写</td>

        <td>可执行</td>

        <td>创建时间</td>

        <td>修改时间</td>

        <td>访问时间</td>

        <td>操作</td>

    </tr>

    <?php

        if($info['file']){

            $i = 1;

            foreach($info['file'] as $val){

                $p = $path.'/'.$val;

    ?>

    <tr align="center">

        <td><?php echo $i;?></td>

        <td><?php echo $val;?></td>

        <td><?php $src = filetype($p) == 'file'?'file_ico.png':'folder_ico.png';?><img src="data:images/<?php echo $src;?>" alt="" title='文件'></td>

        <td><?php echo transByte(filesize($p));?></td>

        <td><?php $src = is_readable($p)?'correct.png':'error.png';?><img src="data:images/<?php echo $src;?>" width="32" alt="" title='可读'></td>

        <td><?php $src = is_writeable($p)?'correct.png':'error.png';?><img src="data:images/<?php echo $src;?>" width="32" alt="" title='可写'></td>

        <td><?php $src = is_executable($p)?'correct.png':'error.png';?><img src="data:images/<?php echo $src;?>" width="32" alt="" title='可写'></td>

        <td><?php echo date('Y-m-d H:i:s',filectime($p));?></td>

        <td><?php echo date('Y-m-d H:i:s',filemtime($p));?></td>

        <td><?php echo date('Y-m-d H:i:s',fileatime($p));?></td>

        <td>

            <?php

                //得到文件扩展名

                $ext = strtolower(end(explode('.',$val)));

                $imageExt = array('gif','jpg','png','jpeg');

                if(in_array($ext, $imageExt)){ ?>

                <a href="javascript:void(0)" onclick='showDetail("<?php echo $val;?>","<?php echo $p;?>")' title='查看'><img src="data:images/show.png" width="32" alt=""></a>

            <?php    }else{ ?>

                <a href="index.php?act=showContent&filename=<?php echo $p;?>" title='查看'><img src="data:images/show.png" width="32" alt=""></a>

            <?php

                }

            ?>

            <a href="index.php?act=editContent&filename=<?php echo $p;?>" title='修改'><img src="data:images/edit.png" width="32" alt=""></a>

            <a href="" title='重命名'><img src="data:images/rename.png" width="32" alt=""></a>

            <a href="" title='复制'><img src="data:images/copy.png" width="32" alt=""></a>

            <a href="" title='剪切'><img src="data:images/cut.png" width="32" alt=""></a>

            <a href="" title='删除'><img src="data:images/delete.png" width="32" alt=""></a>

            <a href="" title='下载'><img src="data:images/download.png" width="32" alt=""></a>

        </td>

    </tr>

    <?php

                $i++;

            }

        }

    ?>

</table>

</form>

<script src='common.js'></script>

</body>

</html>

c.在 common.js 文件中添加 showDetail() 方法

function show(dis){

    document.getElementById(dis).style.display = 'block';

}

function showDetail(t,filename){

    $("#showImg").attr('src',filename);

    $("#showDetail").dialog({

        height:"auto",

        width:"auto",

        position:{my:"center",at:"center",collision:"fit"},

        modal:false,//是否模式对话框

        draggable:true,//是否允许拖拽

        resizable:true,//是否允许缩放

        title:t,//对话框标题

        show:"slide",

        hide:"explode"

    });

}

效果图：

Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片的更多相关文章

Web 在线文件管理器学习笔记与总结（19）上传文件
dir.func.php 中添加方法: /* 上传文件 */ function uploadFile($fileInfo,$path,$allowExt = array('jpg','jpeg','p ...
Web 在线文件管理器学习笔记与总结（17）复制文件（18）剪切文件
(17)复制文件 ① 复制文件通过copy($src,$dst) 来实现 ② 检测目标目录是否存在,如果存在则继续检测目标目录中是否存在同名文件,如果不存在则复制成功 file.func.php 中添 ...
Web 在线文件管理器学习笔记与总结（15）剪切文件夹（16）删除文件夹
(15)剪切文件夹 ① 通过rename($oldname,$newname) 函数实现剪切文件夹的操作 ② 需要检测目标文件夹是否存在,如果存在还要检测目标目录中是否存在同名文件夹,如果不存在则剪切 ...
Web 在线文件管理器学习笔记与总结（13）重命名文件夹（14）复制文件夹
(13)重命名文件夹 ① 重命名文件夹通过 rename($oldname,$newname) 实现 ② 检测文件夹名是否符合规范 ③ 检测当前目录中是否存在同名文件夹名称,如果不存在则重命名成功 i ...
Web 在线文件管理器学习笔记与总结（11）获取文件夹信息（12）返回上一级操作
(11)获取文件夹信息文件夹没有修改操作. index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...
Web 在线文件管理器学习笔记与总结（10）查看文件夹中的内容
① 读取文件夹大小 a. 封装计算文件夹大小的函数 b. 打开文件夹 c. 循环判断文件夹下的内容是文件还是文件夹,如果是文件,则累积相加文件的大小:如果是文件夹,则递归调用该函数注意两个问题: ...
Web 在线文件管理器学习笔记与总结（9）下载文件
① 普通形式的文件可以使用超链接形式下载 <a href = '下载文件名'>点击下载</a> ② 如果下载图片.html 等类型的文件,使用header() 函数发送网页头信 ...
Web 在线文件管理器学习笔记与总结（8）删除文件
unlink($filename) 删除文件 index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...
Web 在线文件管理器学习笔记与总结（7）重命名文件
rename($oldname,$newname) 重命名文件或目录 <<<EOF EOF; 使用heredoc 技术,来部分实现界面与代码的准分离重命名时,需要验证新文件名的合法 ...

随机推荐

使用jquery制作可视化的组织结构
组织结构是做项目里面经常用到的,但是要做成可视化的效果比较少,多数使用树结构来表示,但是对于客户来说不是太直观.可以用jOrgChart来实现.如下图的效果,这样就比较直观. 首先你要去下载jOrgC ...
wifi开发总结
转自:http://blog.csdn.net/kakaxi1o1/article/details/35625019 Unable to open connection to supplicant o ...
ASP.NET 数据库访问通用工具
在工作中,有很多项目已上线后,很多项目的数据库服务器都不会对外开放的,外网想直接访问客户数据库服务器时,可能会出现困难. 这时就需要一个可以查询,更新数据库操作的页面了: 本来用sql语句直接操作数据 ...
laravel框架session使用教程
laravel是一款php框架了,在使用laravel时会碰到session使用问题了,在使用过程中碰到一些问题与一些应用的例子. 用Laravel开发应用,把原有的代码copy过来,以前的代码ses ...
PHP描述冒泡排序和快速排序算法
使用PHP描述冒泡排序和快速排序算法,对象可以是一个数组.使用PHP描述顺序查找和二分查找(也叫做折半查找)算法,顺序查找必须考虑效率,对象可以是一个有序数组.写一个二维数组排序算法函数,能够具有通用 ...
phpcmsv9 幻灯片管理模块_UTF8
幻灯片管理模块简介: .可创建多个位置,一个网站多个幻灯处调用互不影响. .独立模块,不修改系统内核,不用担心升级问题. .标签调用灵活. 安装: .复制本目录下面的phpcms目录到你的V9根目录下 ...
matlab练习程序（透视投影，把lena贴到billboard上）
本练习程序是受到了这个老外博文的启发,感觉挺有意思,就尝试了一下.他用的是opencv,我这里用的是matlab. 过去写过透视投影,当时是用来做倾斜校正的,这次同样用到了透视投影,不过更有意思,是将 ...
Java 完美判断中文字符
Java判断一个字符串是否有中文一般情况是利用Unicode编码(CJK统一汉字的编码区间:0x4e00–0x9fbb)的正则来做判断,但是其实这个区间来判断中文不是非常精确,因为有些中文的标点符号比 ...
Eclipse开发，利用WordWrap设置自动换行
安装 WordWrap : Help → install new Software→http://ahtik.com/eclipse-update/ 安装成功后,重启Eclipse,鼠标右键开启自动换 ...
贪心 URAL 1303 Minimal Coverage
题目传送门 /* 题意:最少需要多少条线段能覆盖[0, m]的长度贪心:首先忽略被其他线段完全覆盖的线段,因为选取更长的更优接着就是从p=0开始,以p点为标志,选取 (node[i].l < ...

Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片

Web 在线文件管理器学习笔记与总结（6）jQuery UI 预览图片的更多相关文章

随机推荐

热门专题