基本信息
源码名称：多图片上传及预览
源码大小：0.97KB
文件格式：.html
开发语言：CSS
更新时间：2021-11-25
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

简单HTML多图片上传及预览实现


  

<!DOCTYPE html>

<html lang="zh-cn">

      <head>

             <meta charset="UTF-8">

             <title>多图片上传预览</title>

      </head>

      <style>

             body{

                    background-color: #C9DAF8;

             }

             #result{

                    margin-top: 50px;

             }

      </style>

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

                    oBtn.onclick = function() {

                           var oType = oFlie.files[0].type

                           var fs = oFlie.files[0]

                           var pattern = /^(image)\/\w /

                           if (!pattern.test(oType)) {

                                  alert("非图片格式不可上传")

                           }

                           var reader = new FileReader()

                           reader.readAsDataURL(fs)

                           reader.onload = function() {

                                  var oNode = document.createElement("img")

                                  oNode.src = this.result

                                  oNode.width = 100

                                  oNode.height = 100

                                  oRes.appendChild(oNode)

                                  console.log(this)

                           }

                    }

             </script>

      </body>

</html>