45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何基于Javascript实现本地图片预览功能?

如何基于Javascript实现本地图片预览功能?

2017-04-27 21:51:31 来源:www.45fan.com 【

如何基于Javascript实现本地图片预览功能?

本文实例为大家分享了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

如何基于Javascript实现本地图片预览功能?

URL.createObjectURL

可以看出URL实质上是以“blob:”打头的,后面跟着32位的UUID(8-4-4-4-12)的结构。

如何基于Javascript实现本地图片预览功能?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持路饭。


本文地址:http://www.45fan.com/bcdm/88134.html
Tags: 实现 JavaScript 基于
编辑:路饭网
  • 上一篇:如何通过JS实现放大镜效果?
  • 下一篇:没有了
  • 推广内容
    推荐阅读
    热门推荐
    推荐文章
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部