<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="file" onchange="show(this)"/>

        <img id="img" src="">

        <script>

            function show(file){

                var reader = new FileReader();    // 实例化一个FileReader对象，用于读取文件

                var img = document.getElementById('img');     // 获取要显示图片的标签

                //读取File对象的数据

                reader.onload = function(evt){

                    img.width  =  "80";

                    img.height =  "80";

                    img.src = evt.target.result;

                }

                reader.readAsDataURL(file.files[0]);

            }

        </script>

    </body>

js实现图片选中马上显示功能，选择后可以预览，即选即显的更多相关文章

  1. html file控件选择文件后立即预览 js实现

    //上传图片后立即预览 file对象,图片容器id function showImg(fileObj,imgId) { var file=fileObj.files[0]; var r = new F ...

  2. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  3. HTML5: 实现调用系统拍照或者选择照片并预览

    ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览 1.返回顶部 1. <!DOCTYPE html> <html> <head> <meta ...

  4. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

  5. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  6. js实现单张图片（或者多张）的预览功能

      这个是预览单张图片的,如果要预览多张图片,改下面红色标记的地方就好了 <html> <head> <meta http-equiv="Content-Typ ...

  7. JS实现上传图片的三种方法并实现预览图片功能

    地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...

  8. h5 实现调用系统拍照或者选择照片并预览

    这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的 ...

  9. jQuery图片上传前先在本地预览（不经过后端处理）

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...

随机推荐

  1. 假期学习【九】首都之窗百姓信件爬取代码优化以及处理 2020.2.7 Python

    今天对爬取程序进行了优化,修正了错误. 遇到了两个问题与错误: 1.忘记了对文件的读写设置格式,导致导入Hive数据库无法正常显示以及写入. 2.文件的读写操作有误导致数据量仅有应该有的1/2 不完整 ...

  2. 发邮件python

    import smtplib #smtplib是python的一个内置库,所以不需要用pip安装 mailhost='smtp.qq.com' #把qq邮箱的服务器地址赋值到变量mailhost上 q ...

  3. 杭电oj 1087——super jump！jump！jump（java实现）

    question:Super Jumping! Jumping! Jumping! 意思就是找一串数字中的和最大子串 思路:创建另一个数组,每一项是路径数组对应项之前最大子串的和,然后遍历此数组找出最 ...

  4. Wannafly Camp 2020 Day 2K 破忒头的匿名信 - AC自动机,dp

    给定字典和文章,每个单词有价值,求写文章的最小价值 标准的 AC 自动机 dp,设 \(f[i]\) 表示写 \(s[1..i]\) 的最小价值,建立AC自动机后根据 trans 边暴力转移即可 建了 ...

  5. Wannafly Camp 2020 Day 2A 托米的字符串

    #include <bits/stdc++.h> using namespace std; const int N = 1000005; int n; char str[N]; int a ...

  6. MariaDB Windows 安装

    1.复制安装文件到服务器 2.解压到指定的目录,并创建my.ini: 3.编辑my.ini文件内容 [client] port=3307 [mysql] default-character-set=u ...

  7. Chrome 提标 您的浏览器限制了第三方Cookie...解决方法

    最近升级Chrome后会出现  您的浏览器限制了第三方Cookie,这将影响您正常登录,您可以更改浏览器的隐私设置,解除限制后重试. 解决方法: chrome://flags/ 把这句复制到浏览器回车 ...

  8. Princeton Landmarks in Mathematics and Physics

    郎兰茲主页下载:http://10.12.0.10/sunsite.ubc.ca/DigitalMathArchive/Langlands/pdf/?mqcreq=1 http://10.12.0.1 ...

  9. python collections 模块 常用集合

    1.nametulpe # tuple 可以表示不变集合 列如坐标 point = (1,1) # 缺点是 只可以通过下标方式访问 #namedtuple是一个函数,它用来创建一个自定义的tuple对 ...

  10. SSM项目中的.tld文件是什么，有什么作用？怎么自定义tld文件

    原文链接:https://www.cnblogs.com/guaishoubiubiu/p/8721277.html TLD术语解释:标签库描述文件,如要在JSP页面中使用自定义JSP标签,必须首先定 ...