您现在的位置是：首页 > 学无止境 > PHPPHP

在线图片管理功能开发

管理员2020-03-30 14:03:27【PHP】1953人已围观

简介在线图片管理功能开发

在一些编辑器中我们可以经常看到，多张图片上传功能里面有个在线管理，这个功能是可以选择你之前上传过的所有图片，其实原理是很清晰的，就是遍历出你网站目录所有的图片。今天小编做的这个功能比较简单，只是某个文件夹下的所有图片，这个文件是我存放文章封面图的文件夹，为什么做这个功能呢，就是我在写文章的时候我每次都要从本地，上传一张图片，其实有些图片是可以共用的，封面而已只有不在同一页显示就行了。下面看看我做的效果图吧。

在线图片管理功能开发


我点击“在线图片”按钮就弹出一个可以选封面的图库，当在点击的时候会有一个被选择的边框效果，最后确定选择就能选择我刚刚选中的图片了。下面来看实际代码吧。

add.html文件

<input type="button" value="在线图片" onclick="centerWindow('__URL__/online','upfile','810','545')" />
  <script type="text/javascript">
    function centerWindow(url,name,width,height){
  var left=(screen.width-width)/2;
  var top=(screen.height-height)/2-50;
  window.open(url,name,'width='+width+',height='+height+',top='+top+',left='+left);
}
 </script>

online.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线图片</title>
    <script type="text/javascript" src="__HOME_JS__/jquery.2.1.4.min.js"></script>
    <style type="text/css">
    .classify-active img{
      border:3px solid orange;
    }
    .cmenu li{
      list-style-type:none;
      display: inline;
    }
    </style>
    <script type="text/javascript">
    $(function(){
     //点击给选择图片加上边框效果
     $("#cmenu").find("li").eq(0).addClass("classify-active");
     var cotrs = $(".cmenu li");
     cotrs.click(function(){
     $(this).addClass("classify-active").siblings().removeClass("classify-active");
    });
    });
    </script>
</head>

<body>
  <div >
    <ul id="cmenu">
      <foreach name="data" item="v">
      <li><img  src="{$v}" style="width:9%;margin:3px;"></li>
      </foreach>
    </ul>
  </div>

  <div style="margin-top:15px;text-align:center;"><button type="submit" onclick="selectimg(this)" class="btn btn-info btn-current">确认选择</button></div>

</body>
<script type="text/javascript">
//开门指令
function selectimg(obj){
  var src=$(".classify-active").find("img").attr('src');
  // alert(src);
  window.opener.document.getElementById('thumbnail').value =src;
  window.opener.document.getElementById('photo').style.display='block';
  window.opener.document.getElementById('photo').src=src;
  window.close();
}
</script>
</html>

其实最重要的还是这段js代码，这段实现把选中的图片url放到input中，并且关闭刚刚打开的窗口

<script type="text/javascript">
//开门指令
function selectimg(obj){
  var src=$(".classify-active").find("img").attr('src');
  // alert(src);
  window.opener.document.getElementById('thumbnail').value =src;
  window.opener.document.getElementById('photo').style.display='block';
  window.opener.document.getElementById('photo').src=src;
  window.close();
}
</script>

最后看看选中后的效果图

在线图片管理功能开发

顶一下 （0） 赏 踩一下 （0）
小郭博客

相关文章

最新发表

标签云 更多

点击排行

站长特荐

PbootCMS后台增加轮播图自定义分组名称PbootCMS后台增加轮播图自定义分组名称
关闭
QQ 微信 支付宝扫一扫打赏