HTML5的上传图片预览_html5上传图片预览-CSDN博客

本文链接：https://blog.csdn.net/weixin_42270942/article/details/82801096

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{margin: 0;padding: 0;}
           ul li{
               list-style: none;
           }
           textarea{
               resize: none;
           }
           .btn{
               outline: none;
               padding: 8px 10px;
               border: none;
               cursor: pointer;
               color: #fff;
               border-radius: 4px;
           }
           .fr{
               float: right;
           }
           .container{
               width: 600px;
               margin: 20px auto;
               border:1px solid #ddd;
               border-radius: 4px;
               padding: 10px 12px;
           }
           .header{
               position: relative;
           }
           .header_detail{
               height: 40px;
           }
           .send{
               background: blueviolet;
           }
           .view{
               min-height: 100px;
               border: 1px solid black;
               padding: 10px 12px;
               display: none;
           }
           .view .item{
               display: inline-block;
               margin-right: 19px;
               margin-bottom: 5px;
           }
           .view img{
               width:120px;
               height: 120px;
           }
           .load{
               display: inline-block;
               width: 24px;
               height: 24px;
               overflow: hidden;
               position: relative;
               background:url(img/load.png) no-repeat;
               background-size: 100% 100%;
           }
           .load input{
               /*font-size: 100px;*/
               position: absolute;
               right: 0;
               top: 0;
               opacity: 0;
           }
           .list{
               margin-top: 20px;
           }
       </style>
   </head>
   <body>
       <div class="container">
           <div class="header">
               <div class="header_detail">
                   <a href="javascript:;" class="load">
                       <input type="file" name="file" id="flie" />
                   </a>
                   <button class="btn fr send">发送</button>
               </div>
               <div class="view" id="view">
                   
                   
               </div>
           </div>


       </div>
       <script>
           var oFile = document.getElementById("flie")
           var oView = document.getElementById("view")
           var obj = {}
           oFile.addEventListener("change",function(){
               var fs = this.files[0]
               var reader = new FileReader()
               reader.onload = function(){
                   oView.style.display = "block"
                   if(!obj[this.result]){
                       var oImg = document.createElement("img")
                       var oDiv = document.createElement("div")
                       oDiv.className = "item"
                       oImg.src = this.result
                       oDiv.appendChild(oImg)
                       oView.appendChild(oDiv)
                       obj[this.result] = this.result

                   } else {
                       alert('不可以重复上传')
                   }
               }

               reader.onprogress = function(){
                   console.log("正在读取")
               }

               reader.readAsDataURL(fs)

           })
       </script>
   </body>
</html>

HTML5的上传图片预览

效果