点个关注吧! 大佬们, 代码看看就好不是多好看的样式
样式 (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 = Windows.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;'
- }
来源: http://www.jianshu.com/p/cbd815cfffb0