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

<!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. 处理Oracle 监听文件listener.log

       如果连接时候变得较慢 查看Oracle日志记录,可能是因为此文件太大,超过2G, 需要定期清理,(如果多用户,记得用root,可能没权限) 查看listener.log? find / -nam ...

  2. git的快速入门

    Git是目前世界上最先进的分布式版本控制系统(注意,仅仅是一个程序,而不是正真意义上的系统). Why为什么需要版本控制? 场景1:大学毕业前夕,你在完成毕业论文,初稿A写好了,找老师修改,老师提出意 ...

  3. Hbuilder环境下配置php

    XAMPP的安装 https://blog.csdn.net/qing666888/article/details/81914389 安装并配置好Xampp后,在Hbuilder中下载php插件,工具 ...

  4. docker 实践十：docker 网络管理

    本篇是关于 docker 网络管理的内容,同时也包含了 docker 网络的高级应用. 注:环境为 CentOS7,docker 19.03. docker 网络基础 docker 网络模型 在 do ...

  5. linux服务器安装oracle

    Linux安装Oracle 11g服务器(图文) 应该是最完整的Oracle安装教程了,全程在测试服务器上完成,软件环境:Red Hat Enterprise Linux 6:Oracle 11g ( ...

  6. IdentityServer4 手动验签及日志记录

    IdentityServer4的基础知识和使用方式网上有很多特别优秀的文章,如果有对其不了解的推荐阅读一下下面的两篇文章 http://www.ruanyifeng.com/blog/2014/05/ ...

  7. 怎样安装ipython

    ipython 是一个python的交互式shell, 比默认的python shell更好用, 支持自动补全 / 上下翻等功能.  下面是按照方法: # 通用安装方法 pip install ipy ...

  8. java.lang.RuntimeException: Unable to instantiate activity ComponentInfo异常解决

    不能实例化activity有如下三种情况: 1.没有在Manifest.xml 清单中注册该activity,或者在创建完activity后,修改了包名或者activity的类名,而配置清单中没有修改 ...

  9. Access-Control-Max-Age

    app.UseCors(builder => builder .AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader() .AllowCreden ...

  10. openssl 证书cert与key合并pfx

    openssl pkcs12 -export -out server.pfx -inkey server.key -in server.crt