基于JavaScript实现本地图片预览

更新时间：2017年02月08日 16:59:46 作者：司马懿字仲达

这篇文章主要为大家详细介绍了基于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

URL.createObjectURL

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

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

您可能感兴趣的文章:

使用javascript:将其它类型值转换成布尔类型值的解决方法详解
本篇文章是对使用javascript:将其它类型值转换成布尔类型值的解决方法进行了详细的分析介绍。需要的朋友参考下
2013-05-05
javascript创建数组的最简代码
2008-02-02
echarts大屏字体自适应的方法步骤
这篇文章主要介绍了echarts大屏字体自适应的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
使用不同的方法结合/合并两个JS数组
这是一篇关于JavaScript数组使用的一些技巧，我们将使用不同的方法结合/合并两个JS数组，以及讨论每个方法的优点/缺点
2014-09-09
JS实现图片验证码功能
这篇文章主要为大家详细介绍了JS实现图片验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
利用Javascript开发一个二维周视图日历
这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
options预检请求的前后端解决方式详解
这篇文章主要为大家介绍了options预检请求的前后端解决方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
微信小程序实现图片上传功能实例（前端+PHP后端）
这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的相关内容，文中详细介绍了前端+PHP后端的示例代码，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-01-01
Bootstrap CSS布局之表格
这篇文章主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
js实现加载页面就自动触发超链接的示例
下面小编就为大家带来一篇js实现加载页面就自动触发超链接的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08