<!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. 多线程的sleep、yield、join用法及sleep与wait的区别

    Thread类的方法列表:sleep.yield.join用于线程的协作,围绕线程的调度 1.join()等待线程结束:调用join方法的线程,执行结束后才会释放锁.主线程main中调用启动线程(调用 ...

  2. [BOI2008] Elect - 背包dp

    u1s1我一开始理解错了题 然后基本就相当于一个背包dp了 #include <bits/stdc++.h> using namespace std; int n,tot,a[305],f ...

  3. JS高级---案例：验证用户输入的是不是邮箱

    案例:验证用户输入的是不是邮箱 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. centos下配置mongodb定期备份

    https://brickyang.github.io/2017/03/02/Linux-%E8%87%AA%E5%8A%A8%E5%A4%87%E4%BB%BD-MongoDB/ 1.创建备份脚本 ...

  5. 【Python】天天向上的力量

    每天进步一点点会有什么不同呢? Q1:每天进步千分之一或退步千分之一会怎么样? #DayDayUp,每天进步一千分之一 print("基础为1") dayup=pow(1.001, ...

  6. altair package and altair_viewer

    pip install altair pip install altair_viewer Altair is a declarative statistical visualization libra ...

  7. python3练习100题——020

    原题链接:http://www.runoob.com/python/python-exercise-example20.html 题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下 ...

  8. maven报错Non-resolvable parent POM---pom找不到parent

    没有配置relativePath属性,说明运行的时候使用的是默认的,所以它会在默认的pom父类中查找,而不会到我自己创建的里面进行寻找 参考链接:https://blog.csdn.net/qq_37 ...

  9. python3爬取高清壁纸(1)

    这次爬取的目标是:美桌网首页 > 桌面壁纸 > 卡通动漫 类别下的壁纸. 我们先随机选取一个专辑来爬(http://www.win4000.com/wallpaper_detail_545 ...

  10. Java-POJ1004-Financial Management

    题目大意:求出一年十二个月Larry平均每个月得到的利息 读入:12行每行一个浮点数 关于控制浮点数输出位数的资料:https://blog.csdn.net/hsliwei/article/deta ...