没有特别的幸运,那么就特别的努力!!!
既然没有优人的天赋,那就拼吧!
先看下效果:
二话不说 , 直接上代码
为了方便 代码直接放一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: #ebeef5;
font-size: 0.18rem;
}
.header{
position: fixed;
top: 0;
left: 0;
width: 7.5rem;
height: 1.27rem;
line-height: 1.27rem;
background-color: #4188f2;
display: flex;
justify-content: space-between;
font-size: 0.36rem;
color: #fff;
padding:0 20px;
z-index: 9;
}
.header img{
margin-top:0.4rem;
}
.fh{
width: 0.22rem;
height: 0.4rem;
}
.tianjia{
width: 0.38rem;
height: 0.38rem;
}
.top{
width: 100%;
height:1.27rem ;
}
.content{
margin:0.2rem;
padding-bottom: 1.8rem;
background: #fff;
border-radius: 0.1rem;
}
.out-main-top{
display: flex;
}
.canvas-img {
margin-top:0.2rem;
clear: both;
}
.canvas-img li{
width:1.5rem;
height:1.5rem;
position: relative;
border:0.01rem solid #ccc;
cursor: pointer;
float: left;
margin-left:0.2rem;
margin-bottom: 0.2rem;
overflow: hidden;
}
.canvas-img li img {
width:90%;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.canvas-img li .close {
position: absolute;
right: 0.04rem;
top: 0.01rem;
font-style: normal;
font-size: 0.12rem;
color: #666;
}
.add-pic-box {
margin: 0.2rem;
width: 1.5rem;
height: 1.5rem;
border: 1px dashed #999;
border-radius: 4px;
cursor: pointer;
background: #fff url(../images/sc.png) center center no-repeat;
}
</style>
</head>
<body>
<div class="app">
<div class="header">
<img class="fh" src="../images/FH.png" alt="">
<div>上传图片</div>
<div></div>
</div>
<div class="top"></div>
<div class="content">
<!-- 图片上传 -->
<div class="out-main-top">
<div class="add-pic-box" id='addPicBox'>
<input type="file" name="pic[]" multiple id="myinput" onchange="uploadFile()" style="display: none" >
</div>
<ul id="canvasImg" class="canvas-img"></ul>
</div>
<div class="twoBtn">
<button class="qxBtn">取消</button>
<button class="qxBtn btnActive" onclick="uploadFileNow()">上传</button>
</div>
</div>
</div>
<script>
//转换rem
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + "px";
window.addEventListener(
"resize",
function () {
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 7.5 + "px";
},
false
);
//图片上传
var myinput = document.getElementById('myinput');
var canvasImg = document.getElementById('canvasImg');
var allBaseImg=[]; //需要给到后台的图片数据
var AllowImgFileSize = 1024 * 400; //上传图片最大值(单位字节)超过400K上传失败
document.getElementById('addPicBox').addEventListener('click',function(ev){
myinput.click();
})
function uploadFile(){
var files = myinput.files;
//处理图片
transferBase(files);
}
function transferBase(files){
for(var i=0,len=files.length;i<len;i++) {
var file = files[i];
var reader = new FileReader(); //读取文件
//用于图片显示
reader.readAsDataURL(file);
//ArrayBuffer
// reader.readAsArrayBuffer(file);
reader.onload = function(e){
var base64 = e.target.result;
var index = allBaseImg.indexOf(base64);
if(index!=-1) {
console.log('图片已经上传过了!');
return;
}
var str = `<li><img src="${base64}"><i class="close">X</i></li>`;
// var str = '<li><img src="'+base64+'"><i class="close">X</i></li>';
canvasImg.innerHTML += str;
allBaseImg.push(base64);
}
}
}
canvasImg.addEventListener('click',function(ev){
var target = ev.target;
if(target.className=='close'){
var thisbase = target.offsetParent.querySelector('img').getAttribute('src');
var index = allBaseImg.indexOf(thisbase);
allBaseImg.splice(index,1);
target.offsetParent.remove()
}
})
function uploadFileNow(){
//调接口
console.log(allBaseImg);
}
</script>
</body>
</html>
希望能帮助到大家,同时祝愿大家在开发旅途中愉快!!!