<!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. docker的个人理解

    一.什么是docker? docker就是集装箱的原理.可以实现远超于虚拟机的轻量级虚拟化.它是内核级的虚拟化.期望达到使项目运行环境一次封装,到处运行的目的. 集装箱解决了什么问题?在一艘大船上,可 ...

  2. ZOJ1310-Robot (BFS)

    The Robot Moving Institute is using a robot in their local store to transport different items. Of co ...

  3. K3/Cloud 用插件打开一张已存在的单据

    BillShowParameter billpara = new BillShowParameter();billpara.FormId = "SAL_SaleOrder";//单 ...

  4. const真有点烦

    在C++中const代替#define的操作,当定义一个const时必须附一个值给它:const int size = 100;通常C++编译器不为const创建存储空间,相反它把这个定义保存在符号表 ...

  5. [JZOJ4899] 雪之国度

    题目描述 雪之国度有N座城市,依次编号为1到N,又有M条道路连接了其中的城市,每一条道路都连接了不同的2个城市,任何两座不同的城市之间可能不止一条道路.雪之女王赋予了每一座城市不同的能量,其中第i座城 ...

  6. Hog实例

    1.计算Hog的特征得维度: #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2 ...

  7. sort函数的用法(C++排序库函数的调用)

    对数组进行排序,在c++中有库函数帮我们实现,这们就不需要我们自己来编程进行排序了. (一)为什么要用c++标准库里的排序函数 Sort()函数是c++一种排序方法之一,学会了这种方法也打消我学习c+ ...

  8. AcWing 1022. 宠物小精灵之收服 二维费用背包

    #include<iostream> using namespace std ; ; int f[N][N]; int V1,V2,n; int main() { cin>>V ...

  9. 1、Two Sum

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  10. HTTP状态码详解【转】

    HTTP状态码,我都是现查现用. 我以前记得几个常用的状态码,比如200,302,304,404, 503. 一般来说我也只需要了解这些常用的状态码就可以了.  如果是做AJAX,REST,网络爬虫, ...