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

<!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. Python 常用包收集

    转自:http://www.cnblogs.com/Logic0/archive/2010/09/03/1850382.html 常用的自带类库 常用的外部类库       Tkinter———— P ...

  2. LeetCode 378. 有序矩阵中第K小的元素(Kth Smallest Element in a Sorted Matrix) 13

    378. 有序矩阵中第K小的元素 378. Kth Smallest Element in a Sorted Matrix 题目描述 给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩 ...

  3. InnoDB一定会在索引中加上主键吗？

    先回答问题,是的. 故事, 如下图,今天查看慢sql发现同事在建索引的时候竟然包含了主键,第一感觉这种姿势不对. 我记得很多文章都说过二级索引会自动带上主键,为什么还有人这么操作,后来差了些资料,如下 ...

  4. （二）spring初次遇见shiro

    文章目录 集成 Spring 集成中的坑 shiroFilter 的工作原理 权限配置细节 集成 Spring pom.xml 添加shiro相关的依赖 我使用的版本是 ${version.shiro ...

  5. Centos下的 .so is not an ELF file

    1 错误描述: 测试程序时,发现报错: 动态库不是一个ELF文件, 此时确定LD_LIBRARY_PATH设置正确,然后执行ldconfig命令,发现如上图: 后来执行:file liblog4cpp ...

  6. ~jmeter解决csrftoken登录问题

    一.登录接口 url:http://192.168.163.128:/user/login/ 请求方法:post 请求参数: account:用户名 password:登录密码 remember:是否 ...

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

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

  8. WEB学习路线2019完整版（附视频教程+网盘下载地址）

    WEB学习路线2019完整版(附视频教程+网盘下载地址).适合初学者的最新WEB前端学习路线汇总! 在当下来说web前端开发工程师可谓是高福利.高薪水的职业了.所以现在学习web前端开发的技术人员也是 ...

  9. hadoop 节点退役和服役

    节点的服役和退役(hdfs)---------------------- 黑白名单的组合情况-------------------------include //dfs.includeexclude ...

  10. C#方法(用法，参数)

    方法:是一种用于实现可以由对象或类执行的计算或操作的成员,是一个已命名的语句集.方法就是把一些相关的语句组织到一起,用来执行一个任务的语句块.比如每个C#程序至少带一个main函数 1.格式:修饰符  ...