• 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="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="images/<?php echo $src;?>" width="32" alt="" title='可读'></td>
            <td><?php $src = is_writeable($p)?'correct.png':'error.png';?><img src="images/<?php echo $src;?>" width="32" alt="" title='可写'></td>
            <td><?php $src = is_executable($p)?'correct.png':'error.png';?><img src="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="images/show.png" width="32" alt=""></a>
                    
                <?php    }else{ ?>
                    <a href="index.php?act=showContent&filename=<?php echo $p;?>" title='查看'><img src="images/show.png" width="32" alt=""></a>
                <?php
                    }
                ?>
                
                <a href="index.php?act=editContent&filename=<?php echo $p;?>" title='修改'><img src="images/edit.png" width="32" alt=""></a>
                <a href="" title='重命名'><img src="images/rename.png" width="32" alt=""></a>
                <a href="" title='复制'><img src="images/copy.png" width="32" alt=""></a>
                <a href="" title='剪切'><img src="images/cut.png" width="32" alt=""></a>
                <a href="" title='删除'><img src="images/delete.png" width="32" alt=""></a>
                <a href="" title='下载'><img src="images/download.png" width="32" alt=""></a>
            </td>
        </tr>
        <?php            
                    $i++;
                }
            }
        ?>
    </table>
    </form>
    <script src='common.js'></script>
    </body>
    </html>
    View Code

    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",
            "auto",
            position:{my:"center",at:"center",collision:"fit"},
            modal:false,//是否模式对话框
            draggable:true,//是否允许拖拽
            resizable:true,//是否允许缩放
            title:t,//对话框标题
            show:"slide",
            hide:"explode"
        });
    }

    效果图:

  • 相关阅读:
    全程软件测试_项目启动
    全程软件测试_规范测试过程
    python_json常用的方法
    python_eval的用法
    python_判断字符串编码的方法
    python_Notepad++编码集的说明
    python_编码集的介绍
    初识HTML
    mysql学习目录
    python学习目录
  • 原文地址:https://www.cnblogs.com/dee0912/p/4391706.html
Copyright © 2020-2023  润新知