<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
.out-main-top {
height: auto;
overflow: auto;
display: flex;
justify-content: flex-start;
}
.out-main-top button {
padding: 10px 40px;
font-weight: bold;
font-size: 21px;
height: 52px;
margin-left: 30px;
vertical-align: middle;
margin-top: 60px;
}
.canvas-img {
margin-top: 20px;
clear: both;
}
.canvas-img li {
width: 150px;
height: 150px;
position: relative;
border: 1px solid #ccc;
cursor: pointer;
float: left;
margin-right: 10px;
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: 4px;
top: 1px;
font-style: normal;
font-size: 12px;
color: #666;
}
.add-pic-box {
width: 200px;
height: 200px;
border: 1px dashed #999;
border-radius: 4px;
cursor: pointer;
background: #fff url('./images/upload.png') center center no-repeat;
}
.drag-box {
width: 250px;
height: 200px;
border: 1px dashed #ccc;
margin-left: 20px;
color: #ccc;
font-size: 15px;
text-align: center;
padding-top: 90px;
box-sizing: border-box;
}
</style>
</head>
<body>
<!-- <input type="file" id="myinput" onchange="uploadFile()"> -->
<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>
<div id="dropbox" class="drag-box">
或者将文件拖到此处
</div>
<button onclick="uploadFileNow()">上传</button>
</div>
<ul id="canvasImg" class="canvas-img"></ul>
<script>
var myinput = document.getElementById('myinput');
var canvasImg = document.getElementById('canvasImg');
var dropbox = document.getElementById('dropbox');
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);
}
dropbox.addEventListener('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
var dtfiles = e.dataTransfer.files;
transferBase(dtfiles); //转化成banse64
// transferBlob(dtfiles); //arraybuffer
}, false);
</script>
</body>
</html>
