原生js保存显示图片 - javascript技术分享

点个关注吧！大佬们，代码看看就好不是多好看的样式样式(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代码：

点击上传
(上传数3)

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 = "

点击查看图片删除

" 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;' }