HTML5新增-----JS-上传文件之图片

最新推荐文章于 2025-06-06 11:13:40 发布

原创最新推荐文章于 2025-06-06 11:13:40 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #上传文件 #上传图片 #js上传图片 #HTML5

实用同时被 2 个专栏收录

43 篇文章

订阅专栏

37 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>

       </style>
   </head>
   <body>
       <input type="file" id="file" />
       <input type="submit" id="btn"/>
       <div id="result">

       </div>
       <script>
           var oFlie = document.getElementById("file")
           var oBtn = document.getElementById("btn")
           var oRes = document.getElementById("result")
           var oImg = document.getElementsByTagName("img")
           var onOff = true
           oBtn.onclick = function(){
               var oType = oFlie.files[0].type

               var fs = oFlie.files[0]

//               console.log(oType)
               var pattern = /^(image)\/\w+/
               if(!pattern.test(oType)){
                   oRes.innerHTML = "不可以上传"
               }

               var reader = new FileReader()

//               console.log(reader)
               reader.readAsDataURL(fs)
//               console.log(reader)

               reader.onload = function(){
//                   console.log("完成了")
                   console.log(onOff,"1111")

                       if(onOff){
                           var oNode = document.createElement("img")
                           oNode.src = this.result
                           oNode.width = 100
                           oNode.height = 100
                           oRes.appendChild(oNode)
                       }else {
                           alert("ss")
                       }

//                   console.log(this.result)
//                   console.log(oImg[0].src==this.result)
                   for (var i=0;i<oImg.length;i++) {
                       if(oImg[i].src==this.result){

                           onOff = false
                       }
                   }
                   console.log(onOff)
               }
           }
       </script>
   </body>
</html>

使用: