本文已参与「新人创作礼」活动，一起开启掘金创作之路
此dome要点： 1、父级元素宽高固定，内容超出则显示滚动条； 2、点击添加时，新增加div； 3、图片上传（单张图）功能； 4、文本框使用textarea标签，并去除一些默认样式
<!DOCTYPE>
<html>
<head>
<title>108</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<style>
.box {
margin: 0 auto;
border: 1px solid #b0d4e3;
width: 500px;
height: 600px;
/*Y轴导航条*/
overflow-y: auto;
}
.btn {
margin: 20px auto;
width: 300px;
}
.child {
text-align: center;
}
.txt {
margin-top: 5px;
overflow:hidden;
/*border: 0;*/
outline: none;
resize:none;
}
.add_part {
margin-top: 25px;
}
</style>
</head>
<body>
<div id="box" class="box">
<div id="btn" class="btn">
<button id="addtxt">添加文字</button>
<button id="addimg">上传图片</button>
<button id="addvoid">上传视频</button>
<button id="deltxt">删除文字</button>
<button id="delete">删除图片</button>
<button id="delvido">删除视频</button>
</div>
<!--显示区域-->
<div id="child" class="child">
</div>
</div>
<script>
// 添加文本框
$('#addtxt').click(function () {
$('.child').append(" </br><div><textarea class=\"txt\" onfocus=\"if(value=='请输入具体内容'){value=''}\" onblur=\"if (value ==''){value='请输入具体内容'}\">请输入具体内容</textarea></div>");
});
// 添加视频
$('#addvoid').click(function () {
$('.child').append(" </br><div class='vido'>" +
"<input class=\"form-control\" type=\"file\" style=\"height:auto;\" id=\"video\" name=\"video\" />" +
"<video style=\"height:auto;\" src=\"\" id=\"video0\" controls=\"controls\"></video>\n" +
"</div>");
//上传视频后上传按钮消失
$('.form-control').click(function () {
$(this).hide();
})
// 视频上传
$('.form-control').change(function(){
var file = this.files[0];
console.log(file);
readFile(file,$(this));
})
function readFile(file,element){
// 新建阅读器
var reader = new FileReader();
// 根据文件类型选择阅读方式
switch(file.type){
case 'video/mp4':
// case 'video/mv':
reader.readAsDataURL(file);
break;
}
// 当文件阅读结束后执行的方法
reader.addEventListener('load',function(){
// 如果说让读取的文件显示的话，还是需要通过文件的类型创建不同的标签
switch(file.type){
case 'video/mp4':
// case 'video/mv':
console.log(reader);
element.siblings('#video0').attr('src',reader.result);
break;
}
})
}
});
// 添加图片框
$('#addimg').click(function () {
$('.child').append(" </br> <div class=\"add_part\">\n" +
" <input type=\"file\" name=\"\" class=\"add_file\">\n" +
" <img src=\"\" class=\"cover_add\">\n" +
" </div>");
// 图片上传
$('.add_file').change(function(){
var file = this.files[0];
console.log(file);
readFile(file,$(this));
})
function readFile(file,element){
// 新建阅读器
var reader = new FileReader();
// 根据文件类型选择阅读方式
switch(file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
reader.readAsDataURL(file);
break;
}
// 当文件阅读结束后执行的方法
reader.addEventListener('load',function(){
// 如果说让读取的文件显示的话，还是需要通过文件的类型创建不同的标签
switch(file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
console.log(reader);
element.siblings('.cover_add').attr('src',reader.result);
break;
}
})
}
});
// 点击删除事件
// 文本
/*$('#deltxt').click(function () {
$('.child .txt:last').remove();
});*/
//图片
$('#delete').click(function () {
$('.child .add_part:last').remove();
})
//视频
$('#delvido').click(function () {
$('.child .vido:last').remove();
})
</script>
</body>
</html>
其中视频部分加了隐藏的功能（即点击后按钮隐藏），这里也可以使用display：hidden来实现，但是我对于这个不熟，所以就直接用了hide（）来实现。（其他的部分如果要实现同样的功能，解决办法同此一样）
('#delete').click(function () { ('.child').remove( 1、如果是想要一次全部移除，则直接写div或者都包含的class/id就可以了 2、移除某一类，写此类的class/id就可以了 3、从下往上逐渐移除，按代码中那样写就可以了 4、class/id名要自己注意哦！！ ); })
今天又是开心的一天呢！！
