基于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代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
js轮盘抽奖实例分析
Apr 17 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Javascript创建类和对象详解
May 31 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
vue实现购物车结算功能
Jun 18 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
PHP中的正规表达式(二)
2006/10/09 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
javascript自执行函数
2017/02/10 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python内置异常类型全面汇总
2020/05/28 Python
windows支持哪个版本的python
2020/07/03 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
4s店总经理岗位职责
2013/12/31 职场文书
给面试官的感谢信
2014/02/01 职场文书
财务简历的自我评价
2014/03/05 职场文书
机电系毕业生求职信
2014/07/11 职场文书
活动总结新闻稿
2014/08/30 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
家长对孩子的寄语
2015/02/26 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js