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. selenium3加载浏览器

    浏览器禁用更新: 因为selenium对浏览器的支持是有限制的.当浏览器更新到最新版本时,需要下载支持最新版本的插件.有时候selenium还没有更新到支持最新版本的插件,但本地已经更新到最新版本了. ...

  2. Docker学习笔记_安装和使用Apache

    一.准备 1.宿主机OS:Win10 64位 2.虚拟机OS:Ubuntu18.04 3.账号:docker 二.安装 1.搜索镜像                                  ...

  3. Inception安装

    前言: MySQL语句需要审核,这一点每个DBA及开发人员都懂,但介于语句及环境的复杂性,大部分人都是望而却步,对其都是采取妥协的态度,从而每个公司都有自己的方法. 大多数公司基本都是半自动化(脚本+ ...

  4. 数字图像处理实验（15）：PROJECT 06-02，Pseudo-Color Image Processing 标签： 图像处理MATLAB 2017-05-27 20:53

    实验要求: 上面的实验要求中Objective(实验目的)部分是错误的. 然而在我拿到的大纲中就是这么写的,所以请忽视那部分,其余部分是没有问题的. 本实验是使用伪彩色强调突出我们感兴趣的灰度范围,在 ...

  5. EZOJ #202

    传送门 分析 我们知道选一个点的代价就是他所有出边边权的异或和 由于一条边如果两个端点均选边权会异或两次变回0,所以不必担心重复的情况 于是直接跑线性基即可 代码 #include<bits/s ...

  6. Luogu 3723 [AH2017/HNOI2017]礼物

    BZOJ 4827 $$\sum_{i = 1}^{n}(x_i - y_i + c)^2 = \sum_{i = 1}^{n}(x_i^2 + y_i^2 + c^2 - 2 * x_iy_i + ...

  7. Python基础入门-while循环示例

    闲来无事! 想写一些基础的东西! 比如今天的while循环,,,,,, 很多python初学者,最开始学习python的时候,会被while循环给干蒙蔽! 那么今天,小编为大家讲解一些基础的实例,来帮 ...

  8. 【2008nmj】BP二元分类

    在人的大脑里有数以万计的神经元,它们之间通过神经突触来连接.用以判断. BP神经网络 MATLAB实现:

  9. 【JAVA】虚拟机指令集

    [JAVA]虚拟机指令集 – – – 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 0x03 icons ...

  10. 系统架构一：snmp+mrtg服务器监控

    //@author:yuan<turing_zhy@163.com> 码字不易,转载请注明出处 #================================== 开始,服务器准备   ...