基于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中的window.location.search方法简介
Sep 02 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript设计模式之外观模式实例
Oct 10 Javascript
javascript搜索框效果实现方法
May 14 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
js实现动态显示时间效果
Mar 06 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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
一个简单实现多条件查询的例子
2006/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php生成HTML文件的类方法
2019/10/11 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
python pdb调试方法分享
2014/01/21 Python
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python中List.index()方法的使用教程
2015/05/20 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python类class参数self原理解析
2020/11/19 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
单位单身证明范本
2014/01/11 职场文书
假释思想汇报范文
2014/10/11 职场文书
电工实训报告总结
2014/11/05 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL