css代码:
body {
background: #000;
}
.group-coms-pic {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
/* margin-left: 70px; */
}
.item {
position: relative;
height: 270px;
width: 30%;
margin-left: 25px;
}
.pic-box {
height: 90%;
width: 100%;
}
.img {
height: 100%;
}
.tk {
color: #fff;
}
.del {
color: red;
position: absolute;
top: 1%;
left: 86%;
font-size: 18px;
cursor: pointer;
}
.upload-pic {
margin-bottom: 10px;
height: 45px !important;
display: flex;
align-items: center;
}
.up-Lab {
color: #fff;
margin: 20px;
padding: 5px;
font-size: 14px;
background: blueviolet;
border-radius: 5px;
}
::-webkit-scrollbar {
width: 10px !important;
height: 300px !important;
}
::-webkit-scrollbar-track-piece {
background-color: #0d3662;
}
::-webkit-scrollbar-thumb {
cursor: pointer;
background-color: #1a76da;
border-radius: 5px;
}
HTML代码:
<div class="upload-pic">
<label class="up-Lab" for="add-pic-btn">上传图片</label>
<input type="file" accept="image/*" style="display: none;" multiple class="up-file" id="add-pic-btn">
</div>
<div class="group-coms-pic" id="groupTu"> </div>
js代码:
<script type="text/javascript" src="../../js/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../js/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//上传多个文件方法
//input file已增加multiple属性,按住ctrl可选择多图
var arrTitle = []; //存标题名
document.getElementById("add-pic-btn").addEventListener("change", function () {
// undefined
var obj = this;
var length = obj.files.length;
// _html = '';
for (var i = 0; i < length; i++) {
// undefined
var reader = new FileReader();
if (!reader) {
parent.layer.msg("对不起,您的浏览器不支持!请更换浏览器试一下");
// console.log('对不起,您的浏览器不支持!请更换浏览器试一下');
return
}
//存储上传的多张图片名字
arrTitle.push(obj.files[i].name);
console.log(arrTitle);
reader.error = function (e) {
parent.layer.msg("读取异常");
// console.log("读取异常")
};
//iffi语法
(function (i) {
//读取成功
reader.onload = function (e) {
var _src = e.target.result;
//节点
var divItem = document.createElement('div');
divItem.setAttribute('class', 'item');
var divPic = document.createElement('div');
divPic.setAttribute('class', 'pic-box');
var img = document.createElement('img');
img.setAttribute('class', 'img');
img.setAttribute('src', _src);
var divTk = document.createElement('div');
divTk.setAttribute('class', 'tk')
var spanDel = document.createElement('span');
spanDel.setAttribute('class', 'del');
spanDel.setAttribute('title', arrTitle[i]);
spanDel.innerText = 'x';
divTk.innerHTML = arrTitle[i];
divItem.appendChild(divPic);
divPic.appendChild(img);
divItem.appendChild(divTk);
divItem.appendChild(spanDel);
//增加节点结构
var groupTu = document.getElementById('groupTu');
groupTu.insertBefore(divItem, groupTu.firstChild);
//删除节点方法
spanDel.onclick = function () {
removeItem(this);
return false;
};
};
})(i)
reader.onloadstart = function () {
}
reader.onprogress = function (e) {
if (e.lengthComputable) {
parent.layer.msg("正在读取文件");
// console.log("正在读取文件")
}
};
reader.readAsDataURL(obj.files[i]);
}
})
//删除图片
function removeItem(delNode) {
var itemNode = delNode.parentNode,
title = delNode.getAttribute('title');
// var flag = confirm("确认要删除名为:" + title + "的图片?");
if (true) {
itemNode.parentNode.removeChild(itemNode);
parent.layer.msg("删除成功");
// console.log('删除成功~')
}
return false;
}
</script>