在线图片管理功能开发教程

时间：2024年01月27日

来源：网络

编辑：佚名

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

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

在线图片管理功能开发效果图

新闻资讯更多

猜你需要