<!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. 假期学习【一】Ubuntu中Linux的基础操作

    题目: Linux 系统的安装和常用命令 姓名: 赵路仓 日期: 2020.1.24 实验环境: Ubuntu 实验内容与完成情况: (1)切换到目录 /usr/bin: (2)查看目录/usr/lo ...

  2. Django Form组件的扩展

    Form组件扩展 1.用Form组件自带的正则扩展 通过Django内置的字段:Validators自定义验证规则 方式一: from django.forms import Form from dj ...

  3. Wannafly Camp 2020 Day 2I 堡堡的宝藏 - 费用流

    感谢这道题告诉我KM求的是 完备 最大权匹配 :( #include <bits/stdc++.h> using namespace std; #define reset(x) memse ...

  4. arm9特点

    ARM9主要特点 ARM 处理器凭借它的低功耗.高性能等特点,被广泛应用于个人通信等嵌入式领域,而ARM7 也曾在中低端手持设备中占据了一席之地.然而,ARM7 的处理性能逐渐无法满足人们日益增长的高 ...

  5. nginx启动时指定配置文件

    下载源文件方式安装nginx 会在/usr/local目录下安装nginx 此时虚拟机系统中会有两个nginx 如果启动的时候没有指定配置文件的位置,默认读取的配置文件就是/usr/local/ngi ...

  6. AntDesign(React)学习-15 组件定义、connect、interface

    虽然常用的编码用一种即可,但是看别人文档或者示例时,有的写法不熟悉的话看着很不习惯,整理几种实现同一功能的不同写法 1.Dva Connect与@Connect import React, { Pro ...

  7. 二分-B - Dating with girls(1)

    B - Dating with girls(1) Everyone in the HDU knows that the number of boys is larger than the number ...

  8. Python之二：基础知识

    1.常量: 1.1.数:5.1.23.9.25e-3 4种类型的数——整数.长整数.浮点数和复数 2是一个整数的例子. 长整数不过是大一些的整数. 3.23和52.3E-4是浮点数的例子.E标记表示1 ...

  9. Vue项目接入MQTT

    Vue项目接入MQTT 安装mqtt库 npm install mqtt --save Vue代码实现 <template> <div id="app"> ...

  10. jQuery jqgrid 应用实例

    1.html <div class="ibox-content"> <div class=\"jqGrid_wrapper\"> < ...