收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
h1{text-align: center;color: #333;}
.box{
width: 600px;
height: auto;
border: 1px solid #ccc;
margin: 10px auto;
overflow: hidden;
}
.top{
padding: 10px;
border: 1px dashed #ddd;
margin: 10px;
color: #999;
}
.fl{
float: left;
}
.clear{clear: both;}
.top div:nth-child(2){
position: relative;
margin-left: 10px;
}
.top input[type='file']{
width: 48px;
height: 25px;
position: absolute;
top: 1px;
left: 1px;
opacity: 0;
}
.top input[type='text'] {
width: 400px;
height: 20px;
border: 1px solid #ccc;
outline: none;
padding-left: 10px;
}
.top #browse{
border: 0;
width: 50px;
height: 25px;
text-align: center;
/*line-height: 25px;*/
display: inline-block;
background: #00B7EE;
color: #fff;
border-radius: 3px;
}
.imgStyle{
color: #999;
padding: 0 20px 10px 20px;
}
.imgStyle input[type='radio']{
margin-left: 10px;
}
.footer{
text-align: right;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px 0;
}
.footer button{
padding: 5px 20px;
background: #00B7EE;
border: 0;
color: #fff;
border-radius: 3px;
font-size: 14px;
margin-right: 10px;
}
.imgList{padding: 10px;width: 610px;}
.imgList .imgBox{float: left;margin-right: 10px;}
.imgList .btnBox{
width: 100%;
height: 42px;
background: #000;
opacity: 0.6;
margin-top: -42px;
}
.imgList .btnBox button{
border: 0;
font-size: 26px;
color: #fff;
font-family: "微软雅黑";
padding: 3px 12px;
background: #000;
opacity: 0.6;
}
.imgList .btnBox button:hover{
opacity: 1;
}
</style>
</head>
<body>
<h1>图片上传</h1>
<div class="box">
<div class="top">
<div class="fl">缩略图: <input type="text" id="text" name="url" autofocus="autofocus" /> </div>
<div class="fl"><label id="browse" for="browse">浏览</label><input type="file" name="file" id="file" multiple /></div>
<div class="clear"></div>
</div>
<div class="imgStyle">
图片样式：
<input type="radio" name="border" id="zj" value="0" checked="" /><label for="zj"> 直角</label>
<input type="radio" name="border" id="yj" value="50" /><label for="yj"> 圆角</label>
<input type="radio" name="border" id="yx" value="100" /><label for="yx"> 圆形</label>
</div>
<div class="footer">
<button id="add">添加</button>
</div>
<div class="imgList">
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('#file').change(function(){
$('#text').val($('#file').val());
//暂时的水平无法实现
});
$('#add').on('click',function() {
//获取图片地址
var imgUrl = $('.top input[name = "url"]').val();
//alert(imgUrl)
//获取图片边框
var imgBorder = $('.imgStyle input[name = "border"]:checked').val();
//alert(imgBorder)
//创建一个图片元素，并将用户的图片url，添加到新元素上
var img = $('<img>').attr('src',imgUrl).width(186);
//设置相框的圆角，属性中需要px单位
img.css('border-radius',imgBorder + 'px')
//创建一个容器，用来放图片
var imgBox = $('<div class="imgBox"></div>');
//创建上移按钮
var moveUp = $('<button><--</button>');
//创建移除按钮
var remove = $('<button>X</button>');
//创建下移按钮
var moveDown = $('<button>--></button>');
//上移事件
moveUp.on('click',function() {
//在它前一个兄弟节点之前插入
imgBox.prev().before(imgBox);
})
//移除事件
remove.on('click',function() {
//在它前一个兄弟节点之前插入
imgBox.remove();
})
//下移事件
moveDown.on('click',function() {
//在它前一个兄弟节点之前插入
imgBox.next().after(imgBox);
})
//创建一个容器，放按钮
var btnBox = $('<div class="btnBox"></div>');
//将按钮放入容器
btnBox.append(moveUp,remove,moveDown);
//将各个元素放入容器中
imgBox.append(img,btnBox)
//将容器放到页面中
$('.imgList').append(imgBox);
})
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
