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

　　　　   HTML5 退拽文件读取

HTML5拖拽——将本地文件拖拽到网页中显示

FileReader 方法 实现预览图片的更多相关文章

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

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

  2. 使用readAsDataURL方法预览图片

    使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...

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

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

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

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

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

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

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

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

  7. input file 模拟预览图片。

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

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

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

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

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

随机推荐

  1. LoadRunner 关联和集合点、检查点

    1)关联的定义 很多时候,当时录完之后,没有问题.过一段时间再跑脚本,就不会成功.比如session,过期了,再一次使用,就会出错.这个时候,需要在每次访问的时候动态的拿到session,这种情况就需 ...

  2. springBoot集成 quartz动态定时任务

    项目中需要用到定时任务,考虑了下java方面定时任务无非就三种: 用Java自带的timer类.稍微看了一下,可以实现大部分的指定频率的任务的调度(timer.schedule()),也可以实现关闭和 ...

  3. 使用Java创建XML数据

    ------------siwuxie095                         工程名:TestCreateXML 包名:com.siwuxie095.xml 类名:CreateXML. ...

  4. 21. Date 函数

    SQL 日期 当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间,情况就有点复杂了. 在讨论 ...

  5. Part5核心初始化_lesson3---关闭看门狗

    1.看门狗---作用 2.看门狗工作方式 3.原理图 时钟源来自于PCLK经过分频器,经过选择器,输出到作为看门狗定时器,WTDAT为一个预载值,当它计数为零的时候,还没有给WTDAT赋值,那么它会发 ...

  6. 简单的Cooki案例——记录用户上次访问该网页的时间

    功能: 帮助网站实现提示客户端计算机上次访问网站的时间 实现原理: 将每一个会话作为一次访问过程,将每次会话的开始时间作为每次访问网站的时间,然后将这个时间以Cookie的形式存储到客户端的计算机中, ...

  7. css溢出文本显示省略号

    css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...

  8. Oracle数据库之日期函数

    今天给大家介绍一下oracle数据中的日期函数的用法.废话不多说,我们看一下oracle给我们提供了那些函数? 1.sysdate 用途:获取当前系统时间. 2.to_date('字符类型','日期类 ...

  9. exe文件停止运行的情况

    1.程序问题. 2.服务器问题. 3.内存占用问题. 一般情况下,关掉程序,重新打开就可以. 上述情况不行,则关掉电脑,重启. 再不行,Ctr + Alt + Del关掉程序的进程. 不行, Win ...

  10. Replication--复制问答

    在发布表尾部增加字段,需要重新初始化订阅么?答:在发布表尾部增加字段,不需要不需要重新初始化订阅,该修改会自动同步到订阅段,也不需要对复制做任何修改.但如果在同一个发布中增加新的项目,需要重新初始化订 ...