使用FileReader接口的readAsDataURL方法实现图片的预览。

　在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。

这种方法的缺点是：必须要先把图片上传到服务器。那么问题来了，如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，而且，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。

自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里：FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

下面是使用FileReader进行图片预览的简单demo：

<html>

<head>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

<meta name="format-detection" content="telephone=no,email=no,adress=no">

<title>通过filereader接口读取文件</title>

<script type="text/javascript">

var inputElement = document.querySelector('.head-portrait');

inputElement.addEventListener('change', readAsDataURL);

function readAsDataURL() {

//判断浏览器是否支持filereader

if(typeof FileReader=='undifined') {

result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";

return false;

}

var file= inputElement.files[0];

//判断获取的是否为图片文件

if(!/image\/\w+/.test(file.type)) {

alert("请确保文件为图像文件");

return false;

}

var reader=new FileReader();

//readAsDataURL读取文件并将文件数据以URL形式保存到result属性中

reader.readAsDataURL(file);

reader.onload=function(e) {

//result为base64数据

var imgData = this.result;

imgShow.setAttribute('src', imgData);

}

}

</script>

</head>

<div>

<img class="imgshow"  />

<input type="file" class="head-portrait" accept="image/*" />

</div>

<body>

</body>

</html>

使用readAsDataURL方法预览图片的更多相关文章

  1. file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  2. Thinkphp5+plupload图片上传功能，支持实时预览图片。

    今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...

  3. 前端预览图片和H5canvas压缩图片上传

    思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...

  4. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  5. input file 模拟预览图片。

    首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...

  6. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  7. 巧用weui.gallery()，点击图片后预览图片

    要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...

  8. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  9. FileUpload控件预览图片

    HTML代码: <tr> <td class="auto-style1">上传图片:</td> <td> <asp:FileU ...

随机推荐

  1. Discuz网警过滤关键词库

    积累近几年discuz关键词过滤 使用方法:1.进入后台/内容/词语过滤批量添加.2.打开CensorWords.txt,复制里面的文本信息到批量添加的输入框内,点击确定即可.如图: 关键词下载:Ke ...

  2. PHP 依赖注入和控制反转再谈(二)

    今天有个朋友看到yii2中介绍的依赖注入一头雾水,之前我写过类似的文章发给他看了,可能还没深入理解吧,这里我再通俗点描述下依赖注入的原理吧,尽可能滴说通俗易懂一点吧:先还是扯下概念性滴问题(概念问题我 ...

  3. WPF Modern UI 主题更换原理

    WPF Modern UI 主题更换原理 一 . 如何更换主题? 二 . 代码分析 代码路径 : FirstFloor.ModernUI.App / Content / SettingsAppeara ...

  4. 2018最新iOS端界面UI设计规范整理

    在iPhone 6还没出的时候,都是用640×1136 px来做设计稿的,自从6的发布,所有的设计稿尺寸以750×1334 px来做设计稿尺寸 以750x1334px作为设计稿标准尺寸的原由: 从中间 ...

  5. mybatis加载属性

    1): <dataSource>的<property>标签加载属性 在 properties 元素体内定义的属性首先被读取 然后会读取 properties 元素中 resou ...

  6. Grunt 入门操作指南

    0.简介 grunt是一个任务自动运行器.简单来讲,用了以后,再也不用每次修改sass后,去生成下css,也再也不用去一遍遍压缩js了 ,也再也不用修改了点点东西就要去刷新页面,也不需要去复杂地建立一 ...

  7. javascript对象与方法

    对象与方法 一.数组(Array) 1.使用new关键字创建数组 var box = new Array();                                     //创建了一个数 ...

  8. layui table动态表头 改变表格头部 重新加载表格

    改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持con ...

  9. 13.Odoo产品分析 (二) – 商业板块(6) –采购(3)

    接上一篇  查看Odoo产品分析系列--目录 接上一篇Odoo产品分析 (二) – 商业板块(6) –采购(2) 7. 仓库 仓库是在安装采购管理模块时出现的菜单.用于管理工厂库存,包括已经在手的货物 ...

  10. mysql之全球化和本地化：字符集、校对集、中文编码问题

    本文内容: 什么是字符集?什么是校对集? 查看字符集和校对集 设置字符集和校对集 mysql中的中文数据问题 首发日期:2018-04-19 什么是字符集?什么是校对集? 字符集是字母和符号的集合,每 ...