原生js保存显示图片
2020-03-20 本文已影响0人
誩先生
点个关注吧！大佬们，代码看看就好不是多好看的样式
样式(css)：
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
#prompt3 {
width: 100px;
height: 100px;
float: left;
border: 1px solid black;
text-align: center;
position: relative;
}
#imgSpan {
position: absolute;
top: 25px;
left:15px;
}
.filepath {
width: 100%;
height: 100%;
opacity: 0;
}
#previewImg{
float: left;
}
#previewImg p{
width: 100px;
height: 100px;
margin-right: 5px;
float: left;
position: relative;
padding-bottom:17px ;
}
#previewImg img{
width: 100px;
height: 100px;
}
#previewImg span{
cursor:pointer;
position: absolute;
bottom:-10px;
display: none;
background: #999999;
border-radius: 5px;
color: #fff;
padding: 2px 5px;
left: 30px;
}
#previewImg p:hover .delSpan{
display: inline-block;
}
.imgSee{
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.1);
top: 0;
left: 0;
display: none;
}
.imgSee img{
max-width: 800px;
max-height: 800px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.imgSee a{
font-size: 30px;
display: block;
width: 32px;
height: 32px;
background-image: url(x.png);
text-decoration: none;
color: #000000;
position: absolute;
top: 50px;
right: 200px;
}
HTML代码：
<!DOCTYPE html>
<html lang="zh">
<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></title>
<link rel="stylesheet" type="text/css" href="upload.css" />
</head>
<body>
<div id="imgPreview">
<div id="previewImg">
</div>
<div id="prompt3">
<span id="imgSpan">
点击上传
<br />
(上传数3)
</span>
<input type="file" id="file" class="filepath" onchange="changepic(this)" />
<!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
</div>
</div>
<div class="imgSee">
<img src="" >
<a href="javasrcipt:;" onclick="imgDisappea(this)"></a>
</div>
<script src="upload.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
js代码：
var data = []
function changepic(e) {
var reads = new FileReader();
var imgFiles = e.files
var preview = document.getElementById("previewImg")
var str = ''
console.log(e.files);
filePath = imgFiles[0].name
fileFormat = filePath.split('.')[1].toLowerCase()
strSrc = window.URL.createObjectURL(imgFiles[0])
f = e.files[0];
// 将图片存入
reads.readAsDataURL(f);
reads.onload = function(e) {
for (var i = 0; i < data.length; i++) {
if (data[i] == this.result) {
alert('不能上传相同的图片');
document.getElementById('prompt3').style.cssText = 'display: block;'
return
};
}
str = "<p><img src='" + this.result +
"' onclick='imgSee(this)' title='点击查看图片'/><span class='delSpan' onclick='del(this)'>删除</span></p>"
preview.innerHTML += str
data.push(JSON.parse(JSON.stringify(this.result)))
}
if (data.length == 2) {
e.parentNode.style.cssText = 'display: none;'
return
}
e.value = null
};
// 删除写法
function del(e) {
for (var i = 0; i < data.length; i++) {
if (data[i] == e.previousSibling.src) {
data.splice(i, 1)
document.getElementById('prompt3').style.cssText = 'display: block;'
}
}
// 兼容IE的写法
e.parentNode.parentNode.removeChild(e.parentNode);
// e.parentNode.remove()
}
// 查看图片函数
function imgSee(e) {
var imgDisplay = document.getElementsByClassName('imgSee')[0];
imgDisplay.style.cssText = 'display: block;'
imgDisplay.children[0].src = e.src
}
// 点击后图片消失
function imgDisappea(e) {
e.parentNode.style.cssText = 'display: none;'
}
