这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇web前端图片上传(1)就会知道，其实也是按照这种方式上传你的，但是由于上次时间比较紧张，没有详细的介绍今天的主角filereader对象。今天就来好好的看看他。

以下是他常用的几种方法。

  1. abort  none 中断读取
  2. readAsBinaryString file（blob） 将文件读取为二进制码
  3. readAsDataURL file（blob） 将文件读取为 DataURL
  4. readAsText file, （blob） 将文件读取为文本

但是这个可能不好理解是吧。咱们直接上程序，看看程序中是怎么运行的。我期中会加上自己的注释，方便大家查询。同样的，这段程序直接放在编辑器里面，然后直接运行就好了。

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="UTF-8">

         <title>FileReader</title>

     </head>

     <body>

         <p>

             <label>请选择一个文件：</label>

             <input type="file" id="file" />

             <input type="button" value="读取图像" onclick="readAsDataURL()" />

             <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />

             <input type="button" value="读取文本文件" onclick="readAsText()" />

         </p>

         <div id="result" name="result"></div>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script type="text/javascript">

             var result = document.getElementById("result");

             var file = document.getElementById("file");

             //判断浏览器是否支持FileReader接口

             if(typeof FileReader == 'undefined') {

                 result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";

                 //使选择控件不可操作

                 file.setAttribute("disabled", "disabled");

             }

             function readAsDataURL() {

                 //检验是否为图像文件

                 //var file = document.getElementById("file").files[0];//js的写法，也可以写成jquery的

                 var file = $("#file").prop("files")[0];//jquery的写法

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

                     alert("看清楚，这个需要图片！");

                     return false;

                 }

                 var reader = new FileReader();

                 //将文件以Data URL形式读入页面

                 reader.readAsDataURL(file);

                 reader.onload = function(e) {

                     console.log(this.result);

                     var result = document.getElementById("result");

                     //显示文件

                     result.innerHTML = '<img src="' + this.result + '" alt="" />';

                 }

             }

             function readAsBinaryString() {

                 var file = document.getElementById("file").files[0];

                 var reader = new FileReader();

                 //将文件以二进制形式读入页面

                 reader.readAsBinaryString(file);

                 reader.onload = function(f) {

                     console.log(f);

                     console.log(this.result);

                     var result = document.getElementById("result");

                     //显示文件

                     result.innerHTML = this.result;

                 }

             }

             function readAsText() {

                 var file = document.getElementById("file").files[0];

                 var reader = new FileReader();

                 //将文件以文本形式读入页面

                 reader.readAsText(file);

                 reader.onload = function(f) {

                     var result = document.getElementById("result");

                     //显示文件

                     result.innerHTML = this.result;

                 }

             }

         </script>

     </body>

 </html>

　　这里说下程序中的28行和29行，是js和jq的两种写法，而且jq中只能写porp，写attr是会报错的，不知道是不是我的jq版本的问题。

readAsDataURL（）这个方法其实就是把这个文件转换成为了base64的格式，如果是中图片的话，那就是图片的base64格式。
readAsText（）这个方法就是读取成为文本，如果你上传的是一个txt的文件，那么是直接可以读出来你们的文本信息的，但是doc文档格式是不可以的。当然了，html的格式是可以的。
至于51行和52行的打印，是为了看到，究竟是哪个是咱们需要的文件格式，发现了，this.result才是咱们需要的东西。而里面的f并不是。f.target.result这个才是咱们需要的字段。

最后还是附上我前两篇文章的链接吧。方便大家查阅。web前端图片上传(1)，web前端图片上传(2)

web前端图片上传(3)--filereader的更多相关文章

  1. web前端图片上传

    图片上传有很多种形式,但是听说ios只能传字符串,所以为了安卓.ios和web能用一个接口上传图片,采用了基于base64 的方法上传图片. 下面是我的html <div class=" ...

  2. web前端图片上传(2)

    今天发现了一种ajax上传图片的方式,是以前没有用过的,首先来说下为什么要用这种方式.是因为原来后台是用的form表单的方式来提交表单数据的.但是觉得呢,这种方式不太好,因为要刷新页面,前台只用控制台 ...

  3. 七牛云存储的 Javascript Web 前端文件上传

    因为我的个人网站 restran.net 已经启用,博客园的内容已经不再更新.请访问我的个人网站获取这篇文章的最新内容,七牛云存储的 Web 前端文件上传 七牛是不错的云存储产品,特别是有免费的配额可 ...

  4. Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题

    细谈 Web Api 图片上传,在使用 Task.ContinueWith 变量无法赋值问题的解决办法!   在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找 ...

  5. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  6. 细谈 Web Api 图片上传，在使用 Task.ContinueWith 变量无法赋值问题的解决办法！

    在使用Asp.Net Web Api 图片上传接口的时候,到网上找了一些个例子,但大多数找到都是这个版本! [HttpPost] public Task<Hashtable> ImgUpl ...

  7. php $_FILES错误说明 以及图片前端图片上传失败。

    我的另一个原文:https://blog.csdn.net/qq_36570464/article/details/80692241 今天被一个问题弄了好久, 先看代码: 前端: <form m ...

  8. java web开发 图片上传功能

    基本思路在于,配置路径,然后用java I/O的api将图片上传到该目录下. String photoPath =    ServletActionContext.getServletContext( ...

  9. Web前端文件上传进度的显示

    跟后台关系不大,主要是前端js实现,具体使用了XMLHttpRequest的ProgressEvent事件,可以参考MDN中的Using XMLHttpRequest https://develope ...

随机推荐

  1. Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-2.xml, reason:

    http://blog.csdn.net/gyming/article/details/8168166/ 最近接受的这个项目需要Android SDK Tools revision 22.6.2 or ...

  2. Python爬虫入门这一篇就够了

    何谓爬虫 所谓爬虫,就是按照一定的规则,自动的从网络中抓取信息的程序或者脚本.万维网就像一个巨大的蜘蛛网,我们的爬虫就是上面的一个蜘蛛,不断的去抓取我们需要的信息. 爬虫三要素 抓取 分析 存储 基础 ...

  3. 腾讯视频国际版（Android）电量测试方法研究与总结

    本文由云+社区发表 作者:腾讯移动品质中心TMQ 1.研究背景: 在2017年Google I/O大会上,Google发布了Google Play管理中心的新功能:Android vitals.当ap ...

  4. MySQL 四种隔离级别

    什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就是事务具有原子性,一个事务中的一系列的操作要么全部成功,要么一个都不做. 事务的结束有 ...

  5. USB总线标准

    1.USB总线类型: OHCI(Open Host Controller Interface)是支持USB1.1的标准,但它不仅仅是针对USB,UHCI(Universal Host Controll ...

  6. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  7. Android之友盟多渠道打包与数据统计

    文章大纲 一.多渠道打包与数据统计介绍二.友盟实现多渠道打包实战三.友盟数据统计实战四.项目源码下载五.参考文章   一.多渠道打包与数据统计介绍   多渠道打包,相信很多同学都知道.在Android ...

  8. Android之日志管理（Log）

    ##文章大纲一.为什么要使用日志管理工具二.日志管理工具实战三.项目源码下载 ##一.为什么要使用日志管理工具###1. 对IT安全至关重要  当您使用强大的日志管理软件自动触发以保护您的系统时,您已 ...

  9. C# 将datatable导出成Excel

    public void Result( ){try{StringBuilder sql = new StringBuilder();List<SqlParameter> parameter ...

  10. 2018~试试idea~

    无聊~随便写了一个 输入控制台,发现点击run之后,反应要比eclipse慢一些,不知道是什么原因!!! 略略的操作了一下,还是和eclipse的使用习惯有很大的差异~