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

<!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. C++ 配置文件解析类 ParseConfig

    依赖项: 依赖于 ProcessString 类,可从该篇博客获取「字符串处理类 ProcessString (包含常用字符串处理函数)」 ParseConfig.h //Linux & C+ ...

  2. 随机数种子random.seed()理解

    总结: 若采用random.random(),每次都按照一定的序列(默认的某一个参数)生成不同的随机数. 若采用随机数种子random.seed(100),它将在所设置的种子100范围内调用rando ...

  3. Python re模块前的正则表达式常用语法小总结

    一.正则表达式: (1).正则表达式是干什么的  正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串.将匹配的子串替换或 ...

  4. hadoop 批量处理脚本编写

    编写shell脚本就是解决批量处理 1. 在/usr/local/bin 创建脚本 并授权所有用户 chmod a+x  xcall.sh xcall.sh 比如:删除/tmp/*所有文件   批量删 ...

  5. 是否应该学习qt源码（碰到问题的时候，或者文档对函数描述不清楚的时候，可以看一下）

    是否应该学习qt源码 如果你想调用某个函数,但是文档并没有清晰描述这个函数的功能的时候,你就需要去阅读源码,看看Qt究竟是怎么实现的.比如用QNetworkAccessManager发送一个QHttp ...

  6. Java单例最好的设计模式:Spring 之 GlobalAdvisorAdapterRegistry

    先上代码: public abstract class GlobalAdvisorAdapterRegistry { /** * Keep track of a single instance so ...

  7. Powershell学习笔记：(二）、基础知识

    从Window7以后,WIndows系统都自带了Windows PowerShell. 自带版本如下 WIndow7  2.0 WIndow8   3.0 Window8.1      4.0 Win ...

  8. 常用NLog配置

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...

  9. python之爬取小说

    继上一篇爬取小说一念之间的第一章,这里将进一步展示如何爬取整篇小说 # -*- coding: utf- -*- import urllib.request import bs4 import re ...

  10. Java 之 反射机制

    反射:框架设计的灵魂 框架:是一个可以供我们使用的半成品软件.可以在框架的基础上进行软件开发,简化编码. 反射:将类的各个组成部分封装为其他对象,这就是反射机制. 好处: 1. 可以在程序运行过程中, ...