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

<!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. [转帖]TPC-C解析系列04_TPC-C基准测试之数据库事务引擎的挑战

    TPC-C解析系列04_TPC-C基准测试之数据库事务引擎的挑战   http://www.itpub.net/2019/10/08/3331/ OceanBase这次TPC-C测试与榜单上Oracl ...

  2. Android广播机制——初体验

    写在前面的话 文章为笔者自己理解 . -如有错误,欢迎指正- <第一行代码>读书笔记 写于2017年10月16日17:00:40 (一). 安卓广播的分类 a.标准广播 标准广播发出以后, ...

  3. python 之 并发编程（开启子进程的两种方式，进程对象的属性）

    第九章并发编程 同一个程序执行多次是多个进程 import time import os ​ print('爹是:',os.getppid()) #父进程PID,(pycharm) print('me ...

  4. Jmeter-后置处理器--json提取器

    Token提取: 将token放入全局变量: 将token值设为全局变量,${__setProperty(newtoken,${token},)}  添加请求头部管理器作为全局使用,将变量token使 ...

  5. Python进阶:metaclass谈

    metaclass 的超越变形特性有什么用? 来看yaml的实例: import yaml class Monster(yaml.YAMLObject): yaml_tag = u'!Monster' ...

  6. （转）FFmpeg架构之I/O模块分析

    注意:这篇转载的文章比较早,写得很清晰,但是新版的ffmpeg的很多数据结构的名字已经改了.因此只能作参考.(例如ByteIOContext已经改名为AVIOContext) 1概述 ffmpeg项目 ...

  7. 在论坛中出现的比较难的sql问题：37(动态行转列 某一行数据转为列名)

    原文:在论坛中出现的比较难的sql问题:37(动态行转列 某一行数据转为列名) 所以,觉得有必要记录下来,这样以后再次碰到这类问题,也能从中获取解答的思路.

  8. RabbitMQ 应用二

    在应用一中,基本的消息队列使用已经完成了,在实际项目中,一定会出现各种各样的需求和问题,RabbitMQ内置的很多强大机制和功能会帮助我们解决很多的问题,下面就一个一个的一起学习一下. 消息响应机制 ...

  9. 【转载】Sqlserver使用Convert函数进行数据类型转换

    在Sqlserver数据库中,可以使用Convert函数来进行数据类型的转换,如将数字类型decimal转换为字符串nvarchar类型,或者将字符串类型转换为数字类型都可以使用Convert函数来实 ...

  10. OS X系统特有文件目录说明

    os x特有的目录 OS X系统中,除了标准的unix目录外,还增加了特有的目录. /Applications 应用程序目录,默认所有的GUI应用程序都安装在这里: /Library 系统的数据文件. ...