基于JavaScript实现本地图片预览

2019-11-19 17:40:36

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js本地图片预览的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><!--<!DOCTYPE html>一定要放在第一行,除非上面都是空行在HTML规范中,单独存在的标签是不需要使用/来自我关闭的,比如<br>,<input>,<hr>等等这样的标签都是符合语法的.在XHTML规范中,单独存在的标签要按照XML的语法规则进行自我关闭,上面三个标签就应写成<br />,<input />,<hr />--><html>  <head>    <meta charset="utf8">    <style>      input[type=radio] {        /* 按钮与文字对齐 */        vertical-align:middle;      }      input[type=file] {        display: block;      }      #img {        width: 200px;        height: 200px;        border: 1px solid black;        margin-top: 10px;      }    </style>  </head>  <body>    <input type="radio" name="previewType" value="fileReader" onChange="onPreviewTypeChange()">fileReader    <input type="radio" name="previewType" value="createURL" onChange="onPreviewTypeChange()">createURL    <hr>    <input type="file" id="imgFile" onChange="imgChange()" value="test.jpg">    <img id="img">    <script>      var previewTypes = document.getElementsByName("previewType");      var imgFile = document.getElementById("imgFile");      var img = document.getElementById("img");      function getPreviewType() {        for(var i=0; i<previewTypes.length; i++) {          if(previewTypes[i].checked) {            return previewTypes[i].value;          }        }      }      function onPreviewTypeChange() {        imgChange(event.target.value);      }      function imgChange(type) {        img.src = "";        var files = imgFile.files;        console.log(files);        if(!files || files.length === 0) {          return;        }        var file = files[0];        if(!type) {          type = getPreviewType();          if(!type) {            return;          }        }        switch(type) {          case "fileReader":            var fr = new FileReader();            fr.onload = function(progressEvent) {              console.log(progressEvent);              img.src = progressEvent.target.result;            }            fr.readAsDataURL(file);            break;          case "createURL":            img.onload = function() {              //释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。              URL.revokeObjectURL(img.src);            }            img.src = URL.createObjectURL(file);            break;        }      }    </script>  </body></html>

fileReader.readAsDataURL