这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇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. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  2. Vue.js-09：第九章 - 组件基础再探（data、props）

    一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...

  3. 为什么我的会话状态在ASP.NET Core中不工作了？

    原文:Why isn't my session state working in ASP.NET Core? Session state, GDPR, and non-essential cookie ...

  4. .NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现

    先决条件 关于 Ocelot 针对使用 .NET 开发微服务架构或者面向服务架构提供一个统一访问系统的组件. 参考 本文将使用 Ocelot 构建统一入口的 Gateway. 关于 IdentityS ...

  5. 从git仓库导入idea的gradle项目无法添加依赖包问题

    引言 之前将项目导入到git仓库,后来同事从git仓库将项目导入到本地,发现无法导入依赖包. 解决方法 这个勾idea是默认勾上的,意思是idea将默认使用本地离线工作模式,使用的是本地仓库,每次依赖 ...

  6. Scrapy爬虫遇到 ‘Forbidden by robots.txt’的问题

    今天在爬知乎精华时,出现了‘Forbidden by robots.txt’的问题 了解到到scrapy在爬取设定的url之前,它会先向服务器根目录请求一个txt文件,这个文件规定了爬取范围 scra ...

  7. 也谈Reactor模式

    何谓Reactor模式?它是实现高性能IO的一种设计模式.网上资料有很多,有些写的也很好,但大多不知其所以然.这里博主按自己的思路简单介绍下,有不对的地方敬请指正. BIO Java1.4(2002年 ...

  8. 联发科Helio P90(mt6779),P70(mt6775),P60(MT6771),P35,P22(MT6762)芯片参数规格

    Helio P90(mt6779)是一款人工智能处理平台,集成了超级强大的AI专核APU 2.0,具有超强的AI性能和一系列基于人工智能的成像升级.该芯片将重新定义消费者对智能手机AI功能的体验.He ...

  9. git入门手册：git的基本安装，本地库管理，远程上传

    前言: git是分布式的版本库控制系统,它能方便你将自己的代码寄存于远程服务器上,从而实现集体合作开发.git有GUI 图形界面,然而使用终端命令仍是主流.以下基于Ubuntu系统操作git(其方式也 ...

  10. vmware P2V迁移域内windows服务器脱域问题

    windows 域服务器采用vmware converter进行物理机转换为虚拟机,需要在完成后进行退域重新加域操作. 否则,有可能会出现服务器在30天后脱域情况.出现脱域情况,可以通过退域加域的方式 ...