使用readAsDataURL方法预览图片
使用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方法预览图片的更多相关文章
- file上传图片，base64转换、压缩图片、预览图片、将图片旋转到正确的角度
/** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...
- Thinkphp5+plupload图片上传功能，支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
- 前端预览图片和H5canvas压缩图片上传
思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法得到base64字符串来实现压缩. 1.base64转二进制文件 /** * dataURL to blob, re ...
- [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）
原文出處 http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...
- input file 模拟预览图片。
首先申明,接下来内容只是单纯的预览图片,最多选择九张,并没有和后台交互,交互的话需要自己另外写js. 本来想写一个调用摄像头的demo,意外的发现input file 在手机端打开的话,ios可以调用 ...
- Html5选择图片并及时预览图片
以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...
- 巧用weui.gallery()，点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- FileUpload控件预览图片
HTML代码: <tr> <td class="auto-style1">上传图片:</td> <td> <asp:FileU ...
随机推荐
- 微信小程序实现支付功能
小程序支付,没有封装支付代码:直接上一段可用的流程代码吧:微信小程序支付官网文档有详细的说明,这里我就不再赘述啦:客户端js: wx.request({ url:'https://www.xxxx.c ...
- 【redis】6、redis常用命令
[开启redis客户端,执行redis命令] redis-cli -h 192.168.1.27 -a HoomSun1 [批量执行redis命令.把命令写到txt中,批量执行] cat /t ...
- 浅析多线程的对象锁和Class锁
一.前言 本来想在另外一篇文章说的,发现可能篇幅有点大,所以还是另开一篇博文来说好了.知识参考<Java多线程编程核心技术>,评价下这本书吧——大量的代码,简单的说明,真像在看博客.不过这 ...
- JVM虚拟机深入理解+GC回收+类加载
旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/xuri24/article/details/81455449 一,前言 本文章是读了“深入理 ...
- 从发布订阅模式到redux（一）
最近在学习的过程中,学习了一些关于redux的一些知识,学之前用redux,虽然会用但是实现的原理就不是特别清楚,天天沉迷于搬砖 总是这木搬砖也不是个事啊,就准备开始深入了解一些原理性的东西 首先在看 ...
- CSS选择器：子选择符号
<html> <head> <style type="text/css"> .class>h2{color:red} </style ...
- 使用JAVA反射技术实现代码零耦合与功能无限扩展！
1.反射使用的背景 最近在做一个功能,就是实现邮件发送功能,但是邮件发送有不同的内容和数据格式,在开始设计的时候直接将发送的内容写在了发送模块中,后来发现功能增加后,无法继续在里边写了,因为里边的功能 ...
- <解决方法>Centos安装使用Chromedriver
一.安装Chrome 我安装好Centos系统后,就在网上去找Chrome浏览器的安装方法,使用过yum,rpm都安装不上,会报错,然后询问公司的运维,他给我了个包,然后使用:yum localins ...
- 餐饮ERP相关问题FAQ
1.订单无法自动上传,手动上传也是失败. 检查网络是否有问题,网络如果正常,打开本地连接-属性-internet协议版本4-首选DNS服务器设置为(114.114.114.114) 然后再打开IE浏览 ...
- Python自定义异常及抛出异常
""" 自定义异常 """ class MyException(Exception): # 继承异常类 def __init__(self, ...