基于JavaScript实现本地图片预览


Posted in Javascript onFebruary 08, 2017

本文实例为大家分享了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实现本地图片预览

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

Javascript 相关文章推荐
javascript数组组合成字符串的脚本
Jan 06 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js实现tab切换效果实例
Sep 16 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
js中this对象用法分析
Jan 05 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 #Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 #Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 #Javascript
Bootstrap模态窗口源码解析
Feb 08 #Javascript
Bootstrap路径导航与分页学习使用
Feb 08 #Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 #Javascript
Bootstrap导航条学习使用(二)
Feb 08 #Javascript
You might like
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
js 替换
2008/02/19 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
javascript 函数使用说明
2010/04/07 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
初中体育教学反思
2014/01/14 职场文书
主题婚礼策划方案
2014/02/10 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
团日活动总结模板
2014/06/25 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA