<!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. mysql 连接权限

    命令解释: . 第一个表示库,第二个表示表; .对全部数据库的全部表授权,so.ok 表示只对so这个库中的ok表授权 root 表示要给哪个用户授权,这个用户可以是存在的用户,也可以是不存在的 '% ...

  2. ubuntu set up 2 - 双系统时间问题

    http://ubuntuhandbook.org/index.php/2016/05/time-differences-ubuntu-1604-windows-10/ For users who d ...

  3. Wannafly Camp 2020 Day 5A Alternative Accounts

    There are n different accounts on the website, and some of them competed in the recent k contests. H ...

  4. (转)git使用规范

    转自:http://www.ruanyifeng.com/blog/2015/08/git-use-process.html 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个 ...

  5. numpy 一些知识

    import numpy as np 什么类型的相加,返回的还是什么类型的,所以在累加小类型的数值时会出现问题如下: a=np.array([123,232,221], dtype=np.uint8) ...

  6. redis分布式锁在springboot中的实现

    理论知识   redis分布式锁的实现方案请参考文章 如何优雅地用redis实现分布式锁 本案例简介   以秒杀活动为例子,在多线程高并发的情况下需要保证秒杀业务的线程安全性,确保秒杀记录与所扣库存数 ...

  7. 白面系列 nginx

    Nginx == engine x. nginx就是一个服务器.主要提供web服务.负载均衡(反向代理).web缓存等服务. nginx ≈ apache,但nginx是轻量级的高性能高并发的服务器. ...

  8. python中使用anaconda对不平衡数据的处理包imblearn的安装

    为了建模,处理不平衡数据,想使用SMOTEENN方法进行数据平衡处理,为此需要下载对应的包imblearn   最开始直接从anaconda中进行: conda install  imblearn 报 ...

  9. Tomcat 加载外部dll时如何配置

    1.在myeclipse环境下配置 先将dll放置在c:\windows\system32中,然后在myEclipse中,window->Preferences->MyEclipse-&g ...

  10. c数据结构 -- 链表的理解

    链表是结构体变量与结构体变量链接在一起,怎么链接在一起?通过指针 #include <stdio.h> struct Node{ int data; struct Node* next; ...