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

<!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. redis 那些事儿

    1 我的数据存入redis了但是怎么不见了? redis的内存使用是有限的,一直向redis中写入数据(如果配置了allkeyLRU)就会触发内存淘汰机制,将最近没有访问过的的key,value删除掉 ...

  2. 02 HTML

    1. HTML概念: HTML是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空间的文字信息组织在 ...

  3. find_element_by_xpath()的几种方法

    Xpath (XML Path Language),是W3C定义的用来在XML文档中选择节点的语言一:从根目录/开始有点像Linux的文件查看,/代表根目录,一级一级的查找,直接子节点,相当于css_ ...

  4. 关于NumPy的常用函数random.randint

    np.random.randint(low, high=None, size=None, dtype='l') 该函数作用:用于产生离散均匀分布的整数 low:生成元素的最小值 high:生成元素的值 ...

  5. 20191031:Python底层机制

    20191031:Python底层机制 python底层从3个方面来说,分别是: 引用计数机制 垃圾回收机制 内存池机制 引用计数机制 使用引用计数来追踪内存中的对象,所有对象都有引用计数,并且这个引 ...

  6. IO是否会一直占用CPU？（转）

    原文来自知乎:https://www.zhihu.com/question/27734728 这是一个很好的关于并发/并行系统的问题.简单回答就是:IO所需要的CPU资源非常少.大部分工作是分派给DM ...

  7. JNI创建共享内存导致JVM terminated的问题解决（segfault，shared memory，内存越界，内存泄漏，共享内存）

    此问题研究了将近一个月,最终发现由于JNI不支持C中创建共享内存而导致虚拟机无法识别这块共享内存,造成内存冲突,最终虚拟机崩溃. 注意:JNI的C部分所使用的内存也是由JVM创建并管理的,所以C创建了 ...

  8. SQL Server邮件标识点

    <br>---换行 &nbsp:---空格 <H1></H1>---标题 --定义表格格式 N'<table border="1" ...

  9. asp.net后台或前端获取TemplateField绑定的文本

    GridView中使用最多的一个是BoundField,还有一个是TemplateField 这两个各有其特点,BoundField的话比较简单,设置好DataField.HeaderText等就可以 ...

  10. 命令行参数 && json 协议 && 自定义 error 类型

    命令行参数 在写代码的时候,在运行程序做一些初始化操作的时候,往往会通过命令行传参数到程序中,那么就会用到命令行参数 例如,指定程序运行的模式和级别: go run HTTPServer.go --m ...