在开发的时候经常遇到这样的需求，用户在上传图片的时候，想要看到自己上传的图片是否正确，这时候需要把用户上传的图片及时显示出来，然后等他点击上传的时候，程序再执行上传到服务器。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

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

    <img id="portrait" src="" style="display:none;" />

</body>

</html>

<script type="text/javascript">

    function showPreview(source) {

      var file = source.files[0];

      if(window.FileReader) {

          var fr = new FileReader();

          console.log(fr);

          var portrait = document.getElementById('portrait');

          fr.onloadend = function(e) {

            portrait.src = e.target.result;

          };

          fr.readAsDataURL(file);

          portrait.style.display = 'block';

      }

    }

</script>

js实现图片上传实时显示的更多相关文章

  1. ruby on rails爬坑（三）：图片上传及显示

    一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...

  2. 图片上传并显示（兼容ie），图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

  3. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  4. 图片上传即时显示javascript代码

    这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...

  5. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  6. MVC图片上传并显示缩略图

    前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...

  7. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

  8. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  9. 图片上传和显示——上传图片——上传文件）==ZJ

    http://www.cnblogs.com/yc-755909659/archive/2013/04/17/3026409.html aspx上传 http://www.cnblogs.com/mq ...

随机推荐

  1. git将代码提交到多个远程仓库

    在项目目录下执行: git remote set-url --add origin http://mayun.cn/xxx/adsdsdsdcelery-demo.git 即可添加一个远程仓库. 再执 ...

  2. [转帖]Hadoop与Spark比较

    Hadoop与Spark比较 https://www.cnblogs.com/charlesblc/p/6206198.html 感觉自己落下好多东西没有学习 先看这篇文章:http://www.hu ...

  3. [C++] 习题 2.15 实现简单环形队列

    目录 前置技能 环形队列 具体实现 设计一个环形队列,用front和rear分别作为队头和队尾指针,另外用一个tag表示队列是空 ( 0 ) 还是不空 ( 1 ),这样就可以用front==rear作 ...

  4. Java字符串定义及常用方法

    String.StringBuffer和StringBuilder   String修饰的是不可变的字符串,而StringBuffer和StringBuilder类的对象是可以被修改的.   Stri ...

  5. PAT(B) 1077 互评成绩计算（Java）

    题目链接:1077 互评成绩计算 (20 point(s)) 题目描述 在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这 ...

  6. 二十、网卡框架分析、虚拟网卡驱动和DM9621驱动分析

    一.网络设备驱动的结构 网卡设备不同于字符设备和块设备, 网络设备并不对应于/dev目录下的文件,它存放在/sys/class/net目录下. Linux系统对网络设备驱动定义了四个层次: 1. 网络 ...

  7. 在vue中使用swiper组件

    第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...

  8. Eclipse RCP难点：给Command传递参数（Object）

    这个问题网络上没有答案,国外网站上也没有,本人研究了一天,终于搞明白如何实现,实际上是Eclipse RCP的ICommandService本身就已经提供的方法,只是网络上教的都是使用IHandler ...

  9. hdu 1075 map的使用 字符串截取的常用手段 以及string getline 使用起来的注意事项

    首先说字符串的截取套路吧 用坐标一个一个的输入 用遍历的方式逐个去检查字符串中的字符是否为符合的情况 如果是的话 把该字符放入截取string 中 让后坐标前移 如果不是的话 截取结束 坐标初始化 然 ...

  10. javascript 之 扩展对象 jQuery.extend

    在JQuery的API手册中,extend方法挂载在JQuery 和 JQuery.fn两个不同的对象上,但在JQuery内部代码实现的是相同的,只是功能各不相同. 官方解释: jQuery.exte ...