FileReader 方法 实现预览图片
FileReader 方法
| 方法名 | 参数 | 描述 |
|---|---|---|
| abort | none | 中断读取 |
| readAsBinaryString（readAsArrayBuffer） | file（blob） | 将文件读取为二进制码 |
| readAsDataURL | file（blob） | 将文件读取为 DataURL |
| readAsText | file, （blob） | 将文件读取为文本 |
FileReader 事件
| 事件 | 描述 |
|---|---|
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 文件读取成功完成时触发 |
| onloadend | 读取完成触发，无论成功或失败 |
| onloadstart | 读取开始时触发 |
| onprogress | 读取中 |
案例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
function readAsDataURL()
{
if(typeof FileReader=='undifined') //判断浏览器是否支持filereader
{
result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
var file=document.getElementById("imagefile").files[0];
if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件
{
alert("请确保文件为图像文件");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e)
{
var img_result=document.getElementById("result");
img.result.innerHTML='<img src="'+this.result+'" alt=""/>'
} }
</script>
</head> <body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="imagefile" />
<input type="button" value="读取图像" onClick="readAsDataURL();" />
</p>
<div name="result" id="result">
<!-- 这里用来显示图片结果-->
</div>
</body>
</html>
相关文章：MDN FileReader
FileReader 方法 实现预览图片的更多相关文章
- 巧用weui.gallery()，点击图片后预览图片
要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是 ...
- 使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...
- 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 ...
- JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
随机推荐
- CronTrigger表达式和Quartz使用实例入门
CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,如每月8日发工资的定时任务. CronTrigger,你可以 ...
- Elasticsearch聚合限制内存使用
限制内存使用 通常为了让聚合(或者任何需要访问字段值的请求)能够快点,访问fielddata一定会快点, 这就是为什么加载到内存的原因.但是加载太多的数据到内存会导致垃圾回收(gc)缓慢, 因为JVM ...
- web优化
一个小型的网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构.性能的要求都很简单.随着互联网业务的不断丰富,网站相关的技术经过 ...
- WDCP从php5.2升级到5.3的办法，以及升级过程中iconv错误的处理
从wdcp官方论坛我们可以找到一个询问升级的帖子,然后管理员在回复中也提供了升级方法: cd /tmp wget -c http://dl.wdlinux.cn:5180/soft/php-5.3.1 ...
- fail-fast 与 fail-save 机制的区别
link:https://blog.csdn.net/bigtree_3721/article/details/67095084
- Ubuntu无法安装rpm包，ubuntu RPM should not be used directly install RPM packages, use Alien instead!
Ubuntu无法安装rpm包,ubuntu RPM should not be used directly install RPM packages, use Alien instead! 简单来说, ...
- selenium使用ChromeDriver
什么是ChromeDriver? ChromeDriver是Chromium team开发维护的,它是实现WebDriver有线协议的一个单独的服务.ChromeDriver通过chrome的自动代理 ...
- storm源码分析之任务分配--task assignment
在"storm源码分析之topology提交过程"一文最后,submitTopologyWithOpts函数调用了mk-assignments函数.该函数的主要功能就是进行topo ...
- OVS的初始配置
1.去掉bridge模块,为下面用OVS的模块奠定基础 rmmod bridge .insmod datapath/linux/openvswitch_mod.ko .insmod datapath/ ...
- txt文本怎么去除重复项
txt文本怎么去除重复项?做网络推广的朋友经常会遇到这样的问题,txt文本文件里面有许多人名或者电话号码用来发送邮件或者短信,通常有许多是重复的,下面我来介绍两个方法来去除重复项,以人名为范本讲解. ...