图片上传弹窗

app/common/model/FileManager.php

@@ -38,6 +38,25 @@ class FileManager extends \think\Model
         return self::where($where)->field('fileid,filename,filesize,filetime,filepath,fileextension,title,username')->order('fileid DESC')->paginate(['list_rows'=>$limit, 'query' => $param]);
     }
 
+    public static function queryList(array $param = [])
+    {
+        $where = [];
+
+        $cjid = isset($param['cjid']) ? (int) $param['cjid'] : 0;
+
+        $infoid = isset($param['infoid']) ? (int) $param['infoid'] : 0;
+
+        if ($cjid) {
+            $where[] = ['cjid', '=', $cjid];
+        }
+
+        if ($infoid) {
+            $where[] = ['infoid', '=', $infoid];
+        }
+
+        return self::where($where)->field('fileid,filename,filesize,filetime,filepath,fileextension,title,username')->order('fileid DESC')->select();
+    }
+
     public static function saveFile(File $file)
     {
         $fileinfo = self::where('hash_md5', $file->md5())->find();

app/common/service/FileService.php

@@ -30,7 +30,7 @@ class FileService
      * @param string $fontcolor  水印文字颜色
      * @return Image  返回图片对象
      */
-    public static function waterMark(Image $image, int $type = 0, string $watermark = '', string $watertext = '', 
+    public function waterMark(Image $image, int $type = 0, string $watermark = '', string $watertext = '', 
         string $fonttype = '', int $fontsize = 0, string $fontcolor = '#ffffff30'): Image
     {
         if ($type == 0) {
@@ -57,7 +57,7 @@ class FileService
      * @param string $t_suffix  缩略图后缀
      * @return Image  返回图片对象
      */
-    public static function thumbnail(Image $image, string $thumbname, int $width = 384, int $height = 224, int $type = 1)
+    public function thumbnail(Image $image, string $thumbname, int $width = 384, int $height = 224, int $type = 1)
     {
         $image->thumb($width, $height, $type)->save('./storage/' . $thumbname);
 
@@ -148,7 +148,7 @@ class FileService
      * @param array $files
      * @return array
      */
-    public static function getFiles($path, $allowFiles = 'png|jpg|jpeg|gif|bmp|webp', &$files = array())
+    public function getFiles($path, $allowFiles = 'png|jpg|jpeg|gif|bmp|webp', &$files = array())
     {
         if (!is_dir($path)) return null;
         if (substr($path, strlen($path) - 1) != '/') $path .= '/';

app/sys/controller/FileManager.php

@@ -43,10 +43,19 @@ class FileManager extends Base
         $list = FileManagerModel::queryPage($param);
 
         View::assign('list', $list);
-
+        
         return View::fetch();
     }
 
+    public function queryList()
+    {
+        $param = $this->request->param();
+
+        $list = FileManagerModel::queryList($param);
+
+        return json(['code'=>0, 'list'=>$list]);
+    }
+
     /**
      * 浏览文件
      */
@@ -81,16 +90,28 @@ class FileManager extends Base
             $counts = count($dirs) + count($files);
 
             $activeurl = preg_replace("#[\/][^\/]*$#i", "", $activepath);
-
-            View::assign([
-                'dirs'      => $dirs,
-                'files'     => $files,
-                'counts'    => $counts,
-                'activeurl' => $activeurl,
-                'activepath' => $activepath,
-            ]);
-
-            return View::fetch();
+            // halt($activeurl);
+            if ($this->request->isAjax()) {
+                return json([
+                    'code'      => 0,
+                    'dirs'      => $dirs,
+                    'files'     => $files,
+                    'counts'    => $counts,
+                    'activeurl' => $activeurl,
+                    'activepath'=> $activepath,
+                ]);
+            } else {
+                View::assign([
+                    'dirs'      => $dirs,
+                    'files'     => $files,
+                    'counts'    => $counts,
+                    'activeurl' => $activeurl,
+                    'activepath'=> $activepath,
+                ]);
+                
+                return View::fetch();
+            }
+            
         } catch(UnexpectedValueException $uve) {
             $this->error($uve->getMessage());
         }
@@ -264,7 +285,7 @@ class FileManager extends Base
      * 图片上传(iframe 页面)
      */
     public function uploadimg(string $img_id = 'picture', $thumb = false, $width = 400, $height = 300,
-        $original = false, $id = 0, $cjid = 0)
+        $original = false, $infoid = 0, $cjid = 0)
     {
         View::assign([
             'img_id'    => $img_id,
@@ -272,7 +293,7 @@ class FileManager extends Base
             'width'     => $width,
             'height'    => $height,
             'original'  => $original,
-            'id'        => $id,
+            'infoid'    => $infoid,
             'cjid'      => $cjid
         ]);
 
@@ -354,6 +375,9 @@ class FileManager extends Base
                     
                     $result = $this->dealUploadImg($file, $thumb, $width, $height, $original, $id, $cjid);
 
+                    // 删除临时文件
+                    @unlink($file->getRealPath());
+
                     return json([
                         'code'    => 0,
                         'img_id'  => $img_id,
@@ -373,57 +397,19 @@ class FileManager extends Base
      * 选择服务器图片
      * @paran string online_file  服务器图片地址
      * @param string  $img_id   图片ipnut text id 默认值 picture
-     * @param boolean $water    是否添加水印
-     * @param boolean $thumb    是否制作缩略图
-     * @param int $width        缩略图最大宽
-     * @param int $height       缩略图最大高
-     * @param bool $overwrite   生成缩略图后是否保存原图
      */
-    public function uploadonlineimg(string $img_id = 'picture', $water = false, $thumb = false, $width = 400, $height = 300, $overwrite = false)
+    public function uploadOnlineImg(string $img_id = 'picture')
     {
         if ($this->request->isPost()) {
             $pathImg = $this->request->param('online_file');
 
             if ($pathImg && file_exists($this->app->getRootPath() . "public" . $pathImg)) {
-
-                $picname = $pathImg;
-                $thumbname = "";
-
-                if ($thumb) {
-                    if (stripos($picname, $this->t_suffix)) {
-                        $thumbname = $pathImg;
-                    } else {
-                        try {
-                            $file = new File($this->app->getRootPath() . "public"  . $pathImg);
-
-                            $ext = $file->getExtension();
-
-                            $thumbname = str_replace('.' . $ext, '', str_replace('\\', '/', $picname)) . $this->t_suffix . '.' . $ext;
-
-                            if (!file_exists($thumbname)) {
-                                $image = Image::open($file);
-
-                                $image->thumb($width, $height, 1);
-
-                                $image->save($this->app->getRootPath() . "public"  .  $thumbname);
-                                unset($image);
-                            }
-
-                            if ($overwrite) {
-                                $picname = $thumbname;
-                            }
-                        } catch (Exception $e) {
-                            $this->error($e->getMessage());
-                        }
-                    }
-                }
-
-                return [
-                    'code' => 0,
-                    'img_id' => $img_id,
-                    'picname' => $picname,
-                    'thumbname' => $thumbname,
-                ];
+                return json([
+                    'code'    => 0,
+                    'img_id'  => $img_id,
+                    'picname' => $pathImg,
+                    'thumb'   => ''
+                ]);
             } else {
                 $this->error('图片地址不存在');
             }

view/sys/article/save.html

@@ -231,14 +231,6 @@
 
     //添加标题图
     function addTitlePic() {
-        layer.open({
-            type: 2,
-            area: ['700px', '500px'],
-            fix: false, //不固定
-            maxmin: true,
-            shade: 0.4,
-            title: '添加标题图',
-            content: '{:url("file_manager/uploadimg", ["_layer"=>true,"img_id"=>"titlepic"])}'
-        });
+        layer_show('添加标题图', '{:url("file_manager/uploadimg", ["_layer"=>true,"img_id"=>"titlepic"])}', 800, 500);
     }
 </script>

view/sys/file_manager/database_picture.html

@@ -0,0 +1,124 @@
+<style>
+    #online {
+        width: 100%;
+        height: 224px;
+        padding: 10px 0 0 0;
+    }
+
+    #online #imageList {
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        margin-left: 20px;
+    }
+
+    #online ul {
+        display: block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    #online li {
+        float: left;
+        display: block;
+        list-style: none;
+        padding: 0;
+        width: 113px;
+        height: 113px;
+        margin: 0 0 9px 9px;
+        background-color: #eee;
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+    }
+
+    #online li img {
+        cursor: pointer;
+    }
+
+    #online li .icon {
+        cursor: pointer;
+        width: 113px;
+        height: 113px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        border: 0;
+        background-repeat: no-repeat;
+    }
+
+    #online li .icon:hover {
+        width: 107px;
+        height: 107px;
+        border: 3px solid #1094fa;
+    }
+
+    #online li.selected .icon {
+        background-image: url(/static/images/success.png);
+        background-image: url(images/success.gif)\9;
+        background-position: 75px 75px;
+    }
+
+    #online li.clearFloat {
+        float: none;
+        clear: both;
+        display: block;
+        width: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
+    }
+</style>
+<form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
+    <div class="cl mt-20" id="online">
+        <div id="imageList">
+            <ul class="list">
+                <!-- <li>
+                    <img width="170" height="113" src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg?noCache=1634567323"
+                     _src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg">
+                    <span class="icon"></span>
+                </li>
+                 -->
+                <li class="clearFloat"></li>
+            </ul>
+        </div>
+    </div>
+</form>
+
+<script type="text/javascript">
+    function onlinepicture() {
+        let infoid = $("input[name='infoid']").val();
+        let cjid = $("input[name='cjid']").val();
+
+        $.ajax({
+            url: '{:url("file_manager/queryList")}',
+            type: 'POST',
+            async: true,
+            cache: false,
+            data: JSON.stringify({
+                infoid: infoid,
+                cjid: cjid
+            }),
+            processData: false,
+            contentType: 'application/json',
+            dataType: "json",
+            success: function (res) {
+                if (res.code == 0) {
+                    html_str = "";
+                    res.list.forEach(element => {
+                        html_str += '<li><img width="170" height="113" src="' + element.filepath + '?noCache=' + element.filetime + '"';
+                        html_str += '_src="' + element.filepath + '" title="'+element.title+'">';
+                        html_str += '<span class="icon"></span></li>';
+                    });
+                    $('ul.list').prepend(html_str);
+                }
+            }
+        });
+    }
+
+    onlinepicture();
+</script>

view/sys/file_manager/directory_picture.html

@@ -0,0 +1,81 @@
+<div class="row cl">
+    <table class="table table-border table-bordered table-bg">
+        <thead>
+            <tr class="text-c">
+                <th>
+                    <strong>文件名</strong>
+                </th>
+                <th>
+                    <strong>文件大小</strong>
+                </th>
+                <th>
+                    <strong>最后修改时间</strong>
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+</div>
+
+<script type="text/javascript">
+    var data = {
+        dirs: [],
+        files: [],
+        activeurl: '',
+        activepath: ''
+    }
+
+    function maketbody() {
+        let tbhtml = '';
+        tbhtml += '<tr class="text-c" bgcolor="#FFFFFF" height="26" onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
+        tbhtml += '<td>'+(data.activeurl ? '<i class="Hui-iconfont Hui-iconfont-arrow1-top"></i>' : '') +'<a onclick="onlinepicture(\''+data.activeurl+'\')">上级目录</a></td>'
+        tbhtml += '<td>当前目录:<span style="color:#f00;"> ./storage'+data.activepath+'</span></td><td></td></tr>'
+
+        data.dirs.forEach((dir) => {
+            tbhtml += '<tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
+            tbhtml += '<td style="text-align:left;"><img src="/static/images/icon/dir.png">'
+            tbhtml += '<a onclick="onlinepicture(\''+data.activepath+'/'+dir+'\')">'+dir+'</a></td><td></td><td></td></tr>'
+        });
+
+        data.files.forEach((file) => {
+            tbhtml += '<tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor=\'#FCFDEE\';" onMouseOut="javascript:this.bgColor=\'#FFFFFF\';">'
+            tbhtml += '<td style="text-align:left;"><img src="/static/images/icon/'+file.extension+'.png">'
+            tbhtml += '<a onclick="selcetimg(\'/storage'+data.activepath+'/'+file.filename+'\')">'+file.filename+'</a></td>'
+            tbhtml += '<td>'+file.size+'</td><td></td></tr>'
+        });
+
+        document.querySelector('table tbody').innerHTML = tbhtml;
+    }
+
+    function onlinepicture(activepath) {        
+        $.ajax({
+            url: '{:url("file_manager/explorer")}',
+            type: 'GET',
+            async: true,
+            cache: false,
+            data: 'activepath='+activepath,
+            processData: false,
+            contentType: 'application/x-www-form-urlencoded',
+            dataType: "json",
+            success: function (res) {
+                if (res.code == 0) {
+                    // console.log(res);
+                    data.dirs       = res.dirs
+                    data.files      = res.files
+                    data.activeurl  = res.activeurl
+                    data.activepath = res.activepath
+
+                    maketbody();
+                }
+            }
+        });
+    }
+
+    function selcetimg(img) {
+        $("#online_file").val(img);
+    }
+
+    onlinepicture(data.activepath);
+</script>
+

view/sys/file_manager/explorer.html

@@ -70,7 +70,7 @@
                 <tr class="text-c" style="height:26px; " onMouseMove="javascript:this.bgColor='#FCFDEE';"
                     onMouseOut="javascript:this.bgColor='#FFFFFF';">
                     <td style="text-align:left;">
-                        <img src=/static/images/icon/dir.png>
+                        <img src="/static/images/icon/dir.png">
                         <a href="/sys/file_manager/explorer?activepath={$activepath.'/'.$dir}">
                             {$dir}
                         </a>

view/sys/file_manager/uploadimg copy.html

@@ -1,450 +0,0 @@
-<!-- <div class="cl pd-5 bg-1 bk-gray">
-        <a href="{:url('/file_manager/selectpicture')}" class="btn btn-default radius sethumb">
-            <i class="Hui-iconfont">&#xe600;</i> 站内选择 </a>&nbsp;&nbsp;
-        <a href="javascript:void(0);" class="btn btn-primary radius sethumb">
-            <i class="Hui-iconfont">&#xe600;</i> 本地上传 </a>&nbsp;&nbsp;
-        <a href="{:url('/file_manager/onlinepicture')}" class="btn btn-default radius sethumb">
-            <i class="Hui-iconfont">&#xe600;</i> 网络图片 </a>&nbsp;&nbsp;
-    </div> -->
-<!-- 本地上传 -->
-<style>
-    #online {
-        width: 100%;
-        height: 224px;
-        padding: 10px 0 0 0;
-    }
-
-    #online #imageList {
-        width: 100%;
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        margin-left: 20px;
-    }
-
-    #online ul {
-        display: block;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    #online li {
-        float: left;
-        display: block;
-        list-style: none;
-        padding: 0;
-        width: 113px;
-        height: 113px;
-        margin: 0 0 9px 9px;
-        background-color: #eee;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-    }
-
-    #online li img {
-        cursor: pointer;
-    }
-
-    #online li .icon {
-        cursor: pointer;
-        width: 113px;
-        height: 113px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 2;
-        border: 0;
-        background-repeat: no-repeat;
-    }
-
-    #online li .icon:hover {
-        width: 107px;
-        height: 107px;
-        border: 3px solid #1094fa;
-    }
-
-    #online li.selected .icon {
-        background-image: url(/static/images/success.png);
-        background-image: url(images/success.gif)\9;
-        background-position: 75px 75px;
-    }
-
-    #online li.clearFloat {
-        float: none;
-        clear: both;
-        display: block;
-        width: 0;
-        height: 0;
-        margin: 0;
-        padding: 0;
-    }
-</style>
-
-<div id="tab-img" class="HuiTab">
-    <div class="tabBar clearfix">
-        <span>本地上传</span>
-        <span>网络文件上传</span>
-        <a onclick="onlinepicture(1)"><span>服务器图片选择</span></a>
-    </div>
-    <div class="tabCon">
-        <div class="step1 active" style="margin-left:30px;">
-            <form id="form-uploadimg" method="post" action="" enctype="multipart/form-data">
-                <div class="row cl" style="margin-top:20px;">
-                    <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
-                    <div class="formControls col-xs-8 col-sm-8">
-                        格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
-                    </div>
-                    <div class="col-3"> </div>
-                </div>
-                <div class="row cl" style="margin-top:20px;">
-                    <label class="form-label col-xs-2 col-sm-2">
-                        <span class="c-red">*</span>本地上传：</label>
-                    <div class="formControls col-xs-4 col-sm-4">
-                        <input type="file" class="input-text" name="upload_file" id="upload_file">
-                    </div>
-                    <div class="col-3"> </div>
-                </div>
-                <div class="row cl" style="margin-top:20px;">
-                    <input type="hidden" name="img_id" value={$img_id}>
-                    <div class="formControls col-xs-12 col-sm-8">
-                        <div class="skin-minimal">
-                            <div class="check-box">
-                                <input type="checkbox" name="overwrite" value="{$overwrite}" {$overwrite ? 'checked'
-                                    : "" }>
-                                <label for="overwrite">覆盖原图</label>
-                            </div>
-                            <div class="check-box">
-                                <input type="checkbox" name="water" value="{$water}" {$water ? 'checked' : "" }>
-                                <label for="water">水印</label>
-                            </div>
-                            <div class="check-box">
-                                <input type="checkbox" name="thumb" value="{$thumb}" {$thumb ? 'checked' : "" }>
-                                <label for="thumb-1">缩略图</label>
-                                <input type="text" class="input-text" name="width" value={$width}
-                                    style="width: 80px;">缩略图宽度
-                                <input type="text" class="input-text" name="height" value={$height}
-                                    style="width: 80px;">缩略图高度
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row cl" style="margin-top:30px;margin-left:30px;">
-                    <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
-                        <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
-                            onCLick="uploadImg()">
-                        <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
-                            onClick="layer_close();">
-                    </div>
-                </div>
-            </form>
-        </div>
-        <!-- 本地上传end -->
-    </div>
-    <div class="tabCon">
-        <form id="form-uploadurlimg" method="post" action="" enctype="multipart/form-data">
-            <div class="row cl" style="margin-top:20px;">
-                <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>图片要求: </label>
-                <div class="formControls col-xs-8 col-sm-8">
-                    格式 jpg,png,gif,jpeg,webp; 大小不超过4M.
-                </div>
-                <div class="col-3"> </div>
-            </div>
-            <div class="row cl" style="margin-top:20px;">
-                <label class="form-label col-xs-2 col-sm-2">
-                    <span class="c-red">*</span>图片地址：</label>
-                <div class="formControls col-xs-4 col-sm-4">
-                    <input type="text" class="input-text" name="url_file" id="url_file">
-                </div>
-                <div class="col-3"> </div>
-            </div>
-            <div class="row cl" style="margin-top:20px;">
-                <input type="hidden" name="img_id" value={$img_id}>
-                <div class="formControls col-xs-12 col-sm-8">
-                    <div class="skin-minimal">
-                        <div class="check-box">
-                            <input type="checkbox" name="overwrite" value="{$overwrite}" {$overwrite ? 'checked' : "" }>
-                            <label for="overwrite">覆盖原图</label>
-                        </div>
-                        <div class="check-box">
-                            <input type="checkbox" name="water" value="{$water}" {$water ? 'checked' : "" }>
-                            <label for="water">水印</label>
-                        </div>
-                        <div class="check-box">
-                            <input type="checkbox" name="thumb" value="{$thumb}" {$thumb ? 'checked' : "" }>
-                            <label for="thumb-1">缩略图</label>
-                            <input type="text" class="input-text" name="width" value={$width} style="width: 80px;">缩略图宽度
-                            <input type="text" class="input-text" name="height" value={$height}
-                                style="width: 80px;">缩略图高度
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row cl" style="margin-top:30px;margin-left:30px;">
-                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
-                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
-                        onCLick="uploadUrlImg()">
-                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
-                        onClick="layer_close();">
-                </div>
-            </div>
-        </form>
-    </div>
-    <!-- 在线图片 -->
-    <div class="tabCon">
-        <form id="form-uploadonlineimg" method="post" action="" enctype="multipart/form-data">
-            <div class="row cl" style="margin-top:20px;" id="online">
-                <div id="imageList">
-                    <ul class="list">
-                        <!-- <li>
-                            <img width="170" height="113" src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg?noCache=1634567323"
-                             _src="/storage/20220223/d5cc488e71c58bb072debe45ed06c6ad.jpg">
-                            <span class="icon"></span>
-                        </li>
-                         -->
-                        <li class="clearFloat"></li>
-                    </ul>
-                </div>
-            </div>
-            <div class="row cl" style="margin-top:20px;">
-                <label class="form-label col-xs-2 col-sm-2">
-                    <span class="c-red">*</span>图片地址：</label>
-                <div class="formControls col-xs-8 col-sm-8">
-                    <input type="text" class="input-text" name="online_file" id="online_file">
-                </div>
-                <div class="col-3"> </div>
-            </div>
-            <div class="row cl" style="margin-top:20px;">
-                <input type="hidden" name="img_id" value={$img_id}>
-                <div class="formControls col-xs-12 col-sm-8">
-                    <div class="skin-minimal">
-                        <div class="check-box">
-                            <input type="checkbox" name="thumb" value="{$thumb}" {$thumb ? 'checked' : "" }>
-                            <label for="thumb-1">缩略图</label>
-                            <input type="text" class="input-text" name="width" value={$width} style="width: 80px;">缩略图宽度
-                            <input type="text" class="input-text" name="height" value={$height}
-                                style="width: 80px;">缩略图高度
-                            <input type="checkbox" name="overwrite" value="{$overwrite}" {$overwrite ? 'checked' : "" }>
-                            <label for="overwrite">覆盖原图</label>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row cl" style="margin-top:30px;margin-left:30px;">
-                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
-                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
-                        onCLick="uploadOnlineImg()">
-                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
-                        onClick="layer_close();">
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
-<!--请在下方写此页面业务相关的脚本-->
-<script type="text/javascript">
-    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
-        var $tab_menu = $(tabBar);
-        // 初始化操作
-        $tab_menu.removeClass(class_name);
-        $(tabBar).eq(i).addClass(class_name);
-        $(tabCon).hide();
-        $(tabCon).eq(i).show();
-
-        $tab_menu.bind(tabEvent, function () {
-            $tab_menu.removeClass(class_name);
-            $(this).addClass(class_name);
-            var index = $tab_menu.index(this);
-            $(tabCon).hide();
-            $(tabCon).eq(index).show()
-        })
-    }
-
-    $(function () {
-        $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");
-        $(document).on("click", "#online li", function(){
-            $("#online li").removeClass('selected');
-
-            $(this).addClass('selected');
-
-            img = $(this).children('img').attr('_src');
-
-            $("#online_file").val(img);
-        })
-    });
-
-    function onlinepicture(page) {
-        var data = { "page": page };
-        $.ajax({
-            url: '{:url("file_manager/onlineimg")}',
-            type: 'GET',
-            async: true,
-            cache: false,
-            data: 'page=' + page,
-            processData: false,
-            contentType: false,
-            dataType: "json",
-            success: function (res) {
-                if (res.code == 0) {
-                    html_str = "";
-                    res.list.forEach(element => {
-                        html_str += '<li><img width="170" height="113" src="' + element.url + '?noCache=' + element.mtime + '"';
-                        html_str += '_src="' + element.url + '">';
-                        html_str += '<span class="icon"></span></li>';
-                    });
-                    $('ul.list').prepend(html_str);
-                }
-            }
-        });
-    }
-
-    //step1本地上传图片
-    function uploadImg() {
-        if ($("#upload_file").val() == '') {
-            layer.msg("请选择要上传的文件", {
-                icon: 6,
-                time: 1000
-            });
-            return false;
-        } else {
-            var formData = new FormData($("#form-uploadimg")[0]);
-            $.ajax({
-                url: '{:url("file_manager/uploadimg")}',
-                type: 'POST',
-                async: true,
-                cache: false,
-                data: formData,
-                processData: false,
-                contentType: false,
-                dataType: "json",
-                beforeSend: function () {
-                    // loadIndex = layer.load();
-                },
-                success: function (res) {
-                    if (res.code == 0) {
-                        // layer.close(loadIndex);
-                        console.log(res);
-                        var img = res.picture_url + res.picname;
-                        window.parent.$("#" + res.img_id).val(img);
-
-                        if (res.thumbname) {
-                            img = res.picture_url + res.thumbname;
-                            window.parent.$("#thumb").val(img);
-                        }
-
-                        window.parent.$("#view-" + res.img_id).attr('src', img);
-                        layer_close();
-                    } else {
-                        // layer.close(loadIndex);
-                        layer.msg(res.msg, {
-                            icon: 5,
-                            time: 1000
-                        });
-                        return false;
-                    }
-                }
-            });
-        }
-    }
-
-    // 网络图片
-    function uploadUrlImg() {
-        if ($("#url_file").val() == '') {
-            layer.msg("文件地址不可以为空", {
-                icon: 6,
-                time: 1000
-            });
-            return false;
-        } else {
-            var formData = new FormData($("#form-uploadurlimg")[0]);
-            $.ajax({
-                url: '{:url("file_manager/uploadurlimg")}',
-                type: 'POST',
-                async: true,
-                cache: false,
-                data: formData,
-                processData: false,
-                contentType: false,
-                dataType: "json",
-                beforeSend: function () {
-                    // loadIndex = layer.load();
-                },
-                success: function (res) {
-                    if (res.code == 0) {
-                        console.log(res);
-                        // layer.close(loadIndex);
-                        var img = res.picture_url + res.picname;
-                        window.parent.$("#" + res.img_id).val(img);
-
-                        if (res.thumbname) {
-                            img = res.picture_url + res.thumbname;
-                            window.parent.$("#thumb").val(img);
-                        }
-
-                        window.parent.$("#view-" + res.img_id).attr('src', img);
-                        layer_close();
-                    } else {
-                        // layer.close(loadIndex);
-                        layer.msg(res.msg, {
-                            icon: 5,
-                            time: 1000
-                        });
-                        return false;
-                    }
-                }
-            });
-        }
-    }
-
-    function uploadOnlineImg() {
-        if ($("#online_file").val() == '') {
-            layer.msg("文件地址不可以为空", {
-                icon: 6,
-                time: 1000
-            });
-            return false;
-        } else {
-            var formData = new FormData($("#form-uploadonlineimg")[0]);
-            $.ajax({
-                url: '{:url("file_manager/uploadonlineimg")}',
-                type: 'POST',
-                async: true,
-                cache: false,
-                data: formData,
-                processData: false,
-                contentType: false,
-                dataType: "json",
-                beforeSend: function () {
-                    // loadIndex = layer.load();
-                },
-                success: function (res) {
-                    if (res.code == 0) {
-                        // console.log(res);
-                        // layer.close(loadIndex);
-                        var img = res.picname;
-                        window.parent.$("#" + res.img_id).val(img);
-
-                        if (res.thumbname) {
-                            img = res.thumbname;
-                            window.parent.$("#thumb").val(img);
-                        }
-
-                        window.parent.$("#view-" + res.img_id).attr('src', img);
-                        layer_close();
-                    } else {
-                        // layer.close(loadIndex);
-                        layer.msg(res.msg, {
-                            icon: 5,
-                            time: 1000
-                        });
-                        return false;
-                    }
-                }
-            });
-        }
-    }
-</script>
-<!--请在上方写此页面业务相关的脚本-->

view/sys/file_manager/uploadimg.html

@@ -7,87 +7,11 @@
             <i class="Hui-iconfont">&#xe600;</i> 网络图片 </a>&nbsp;&nbsp;
     </div> -->
 <!-- 本地上传 -->
-<style>
-    #online {
-        width: 100%;
-        height: 224px;
-        padding: 10px 0 0 0;
-    }
-
-    #online #imageList {
-        width: 100%;
-        height: 100%;
-        overflow-x: hidden;
-        overflow-y: auto;
-        position: relative;
-        margin-left: 20px;
-    }
-
-    #online ul {
-        display: block;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    #online li {
-        float: left;
-        display: block;
-        list-style: none;
-        padding: 0;
-        width: 113px;
-        height: 113px;
-        margin: 0 0 9px 9px;
-        background-color: #eee;
-        overflow: hidden;
-        cursor: pointer;
-        position: relative;
-    }
-
-    #online li img {
-        cursor: pointer;
-    }
-
-    #online li .icon {
-        cursor: pointer;
-        width: 113px;
-        height: 113px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 2;
-        border: 0;
-        background-repeat: no-repeat;
-    }
-
-    #online li .icon:hover {
-        width: 107px;
-        height: 107px;
-        border: 3px solid #1094fa;
-    }
-
-    #online li.selected .icon {
-        background-image: url(/static/images/success.png);
-        background-image: url(images/success.gif)\9;
-        background-position: 75px 75px;
-    }
-
-    #online li.clearFloat {
-        float: none;
-        clear: both;
-        display: block;
-        width: 0;
-        height: 0;
-        margin: 0;
-        padding: 0;
-    }
-</style>
-
 <div id="tab-img" class="HuiTab">
     <div class="tabBar clearfix">
         <span>本地上传</span>
         <span>网络文件上传</span>
-        <a onclick="onlinepicture(1)"><span>服务器图片选择</span></a>
+        <span>服务器图片选择</span>
         <input type="hidden" name="layer" id="layer" value="{$layer}">
     </div>
     <div class="tabCon">
@@ -110,7 +34,7 @@
                 </div>
                 <div class="row cl" style="margin-top:20px;">
                     <input type="hidden" name="img_id" value={$img_id}>
-                    <input type="hidden" name="id" value={$id}>
+                    <input type="hidden" name="infoid" value={$infoid}>
                     <input type="hidden" name="cjid" value={$cjid}>
                     <div class="formControls col-sm-8">
                         <div class="skin-minimal">
@@ -123,8 +47,7 @@
                                     style="width: 80px;">缩略图高度
                             </div>
                             <div class="check-box">
-                                <input type="checkbox" name="original" value="true" {$original ? 'checked'
-                                    : "" }>
+                                <input type="checkbox" name="original" value="true" {$original ? 'checked' : "" }>
                                 <label for="overwrite">保留原图</label>
                             </div>
                         </div>
@@ -162,6 +85,8 @@
             </div>
             <div class="row cl" style="margin-top:20px;">
                 <input type="hidden" name="img_id" value={$img_id}>
+                <input type="hidden" name="infoid" value={$infoid}>
+                <input type="hidden" name="cjid" value={$cjid}>
                 <div class="formControls col-xs-12 col-sm-8">
                     <div class="skin-minimal">
                         <div class="check-box">
@@ -169,7 +94,7 @@
                             <label for="thumb-1">缩略图</label>
                             <input type="text" class="input-text" name="width" value={$width} style="width: 80px;">缩略图宽度
                             <input type="text" class="input-text" name="height" value={$height}
-                            style="width: 80px;">缩略图高度
+                                style="width: 80px;">缩略图高度
                         </div>
                         <div class="check-box">
                             <input type="checkbox" name="original" value="{$original}" {$original ? 'checked' : "" }>
@@ -189,8 +114,41 @@
         </form>
     </div>
     <!-- 在线图片 -->
+    <style>
+        a.active-btn {
+            color: #fff;
+            background-color: #3bb4f2;
+            border-color: #3bb4f2;
+        }
+    </style>
     <div class="tabCon">
-
+        <a class="btn radius active-btn" id="database_picture"><i class="Hui-iconfont Hui-iconfont-jifen"></i>数据库模式</a>
+        <a class="btn radius" id="directory_picture"><i class="Hui-iconfont Hui-iconfont-pages"></i> 目录模式</a>
+        <div class="database online-picture">
+            {include file="file_manager/database_picture" /}
+        </div>
+        <div class="directory online-picture" style="display: none;">
+            {include file="file_manager/directory_picture" /}
+        </div>
+        <form id="form-uploadonlineimg" method="post" action="" enctype="multipart/form-data">
+            <div class="row cl" style="margin-top:20px;">
+                <label class="form-label col-xs-2 col-sm-2">
+                    <span class="c-red">*</span>图片地址：</label>
+                <div class="formControls col-xs-8 col-sm-8">
+                    <input type="hidden" name="img_id" value={$img_id}>
+                    <input type="text" class="input-text" name="online_file" id="online_file">
+                </div>
+                <div class="col-3"> </div>
+            </div>
+            <div class="row cl" style="margin-top:30px;margin-left:30px;">
+                <div class="col-xs-6 col-sm-5 col-xs-offset-2 col-sm-offset-2">
+                    <input class="btn btn-primary radius" type="button" value="&nbsp;确&nbsp;定&nbsp;"
+                        onCLick="uploadOnlineImg()">
+                    <input class="btn btn-default radius" type="button" value="&nbsp;取&nbsp;消&nbsp;"
+                        onClick="layer_close();">
+                </div>
+            </div>
+        </form>
     </div>
 </div>
 
@@ -215,7 +173,7 @@
 
     $(function () {
         $.Huitab("#tab-img .tabBar span", "#tab-img .tabCon", "current", "click", "0");
-        $(document).on("click", "#online li", function(){
+        $(document).on("click", "#online li", function () {
             $("#online li").removeClass('selected');
 
             $(this).addClass('selected');
@@ -223,10 +181,26 @@
             img = $(this).children('img').attr('_src');
 
             $("#online_file").val(img);
-        })
+        });
+
+        $("#database_picture").click(function () {
+            $(".online-picture").css('display', 'none');
+            $(".database").css('display', 'block');
+
+            $(this).addClass('active-btn');
+            $('#directory_picture').removeClass('active-btn');
+        });
+
+        $("#directory_picture").click(function () {
+            $(".online-picture").css('display', 'none');
+            $(".directory").css('display', 'block');
+
+            $(this).addClass('active-btn');
+            $('#database_picture').removeClass('active-btn');
+        });
     });
 
-    //step1本地上传图片
+    // 本地上传图片
     function uploadLocalImg() {
         var layer = $("#layer").val();
         if ($("#upload_file").val() == '') {
@@ -254,17 +228,17 @@
                         // layer.close(loadIndex);
                         if (layer == true) {
                             var img = res.thumb ? res.thumb : res.picname;
-                            
+
                             window.parent.$("#" + res.img_id).val(img);
 
                             window.parent.$("#view-" + res.img_id).attr('src', img);
-                            
+
                             layer_close();
                         } else {
                             layer.msg('上传成功', {
                                 icon: 1,
                                 time: 1000
-                            },()=>{
+                            }, () => {
                                 window.location.reload();
                             });
                         }
@@ -311,12 +285,12 @@
                         if (layer == true) {
                             var img = res.picname;
                             window.parent.$("#" + res.img_id).val(img);
-    
+
                             if (res.thumbname) {
                                 img = res.thumbname;
                                 window.parent.$("#thumb").val(img);
                             }
-    
+
                             window.parent.$("#view-" + res.img_id).attr('src', img);
                             layer_close();
                         } else {
@@ -335,34 +309,8 @@
         }
     }
 
-    function onlinepicture(page) {
-        var data = { "page": page };
-        $.ajax({
-            url: '{:url("file_manager/onlineimg")}',
-            type: 'GET',
-            async: true,
-            cache: false,
-            data: 'page=' + page,
-            processData: false,
-            contentType: false,
-            dataType: "json",
-            success: function (res) {
-                if (res.code == 0) {
-                    html_str = "";
-                    res.list.forEach(element => {
-                        html_str += '<li><img width="170" height="113" src="' + element.url + '?noCache=' + element.mtime + '"';
-                        html_str += '_src="' + element.url + '">';
-                        html_str += '<span class="icon"></span></li>';
-                    });
-                    $('ul.list').prepend(html_str);
-                }
-            }
-        });
-    }
-
-
-
     function uploadOnlineImg() {
+        var layer = $("#layer").val();
         if ($("#online_file").val() == '') {
             layer.msg("文件地址不可以为空", {
                 icon: 6,
@@ -372,7 +320,7 @@
         } else {
             var formData = new FormData($("#form-uploadonlineimg")[0]);
             $.ajax({
-                url: '{:url("file_manager/uploadonlineimg")}',
+                url: '{:url("file_manager/uploadOnlineImg")}',
                 type: 'POST',
                 async: true,
                 cache: false,
@@ -384,21 +332,26 @@
                     // loadIndex = layer.load();
                 },
                 success: function (res) {
+                    // layer.close(loadIndex);
                     if (res.code == 0) {
-                        // console.log(res);
-                        // layer.close(loadIndex);
-                        var img = res.picname;
-                        window.parent.$("#" + res.img_id).val(img);
-
-                        if (res.thumbname) {
-                            img = res.thumbname;
-                            window.parent.$("#thumb").val(img);
+                        if (layer == true) {
+                            var img = res.picname;
+                            window.parent.$("#" + res.img_id).val(img);
+                            if (res.thumbname) {
+                                img = res.thumbname;
+                                window.parent.$("#thumb").val(img);
+                            }
+                            window.parent.$("#view-" + res.img_id).attr('src', img);
+                            layer_close();
+                        } else {
+                            layer.msg('上传成功', {
+                                icon: 1,
+                                time: 1000
+                            }, () => {
+                                window.location.reload();
+                            });
                         }
-
-                        window.parent.$("#view-" + res.img_id).attr('src', img);
-                        layer_close();
                     } else {
-                        // layer.close(loadIndex);
                         layer.msg(res.msg, {
                             icon: 5,
                             time: 1000