原生js保存显示图片

作者: 誩先生 | 来源:发表于2020-03-20 15:50 被阅读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;'
    }
    
    

    相关文章

      网友评论

        本文标题:原生js保存显示图片

        本文链接:https://www.haomeiwen.com/subject/ulbjyhtx.html