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

<!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. conda创建、删除、重命名环境

    链接:https://www.jianshu.com/p/7265011ba3f2 创建新环境 conda create -n rcnn python=3.6 删除环境 conda remove -n ...

  2. java并发知识点

    前言 先列出java并发涉及的知识点,后面再慢慢补. java并发 1 常见概念 进程/线程 进程:程序执行的实体,操作系统资源调度资源分配的基本单元 线程:程序执行的最小单元,拥有独立的堆栈和局部变 ...

  3. javascript加超链接

    JavaScript link 方法:给字符串加上超链接JavaScript link 方法link 方法返回使用 HTML a 标签属性定义的(斜体)字符串.其语法如下:str_object.lin ...

  4. PAT甲级题分类汇编——线性

    本文为PAT甲级分类汇编系列文章. 线性类,指线性时间复杂度可以完成的题.在1051到1100中,有7道: 题号 标题 分数 大意 时间 1054 The Dominant Color 20 寻找出现 ...

  5. SQLSERVER远程链接Oracle数据库

    原文地址: http://blog.sina.com.cn/s/blog_45eaa01a0102ywuk.html 使用SQL链接服务器远程访问Oracle数据库   在本机上通过SQL数据库的链接 ...

  6. ABP 基于DDD的.NET开发框架 学习（一）

    ABP总体介绍 ABP是ASP.NET Boilerplate Project,ASP.NET样板项目. ABP框架定位于快速开发 ABP是一个用于最快实践和流行开发现代Web应用程序的新起点,旨在成 ...

  7. 遗传算法python实现

    最近看了一下遗传算法,使用轮盘赌选择染色体,使用单点交叉,下面是代码实现(python3) import numpy as np import random from scipy.optimize i ...

  8. ios 日常开发常用宏定义

      #pragma mark - 字体.颜色相关 #define kFONT_SIZE(f) [UIFont systemFontOfSize:(f)] #define kFONT_BOLD_SIZE ...

  9. iOS自动布局学习（UIView+AutoLayout）

    自动布局虽然在iOS6的时候已经推出,不过由于各个原因并没有被开发组广泛使用.一方面是大家的app支持版本都是低于iOS6的,另一方面来说是Xcode支持木有现在这么好.以前由于iPhone设备相对固 ...

  10. Javascript的异步与单线程

    一.前言 我们都知道,javasript是一个单线程的语言:所谓单线程就是同一时间不能做两件事情,两段代码不能同时执行:因为这种机制,才避免了两段js同时对一个DOM节点进行渲染的冲突.但是也会因此产 ...