这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇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. TensorFlow从1到2（九）迁移学习

    迁移学习基本概念 迁移学习是这两年比较火的一个话题,主要原因是在当前的机器学习中,样本数据的获取是成本最高的一块.而迁移学习可以有效的把原有的学习经验(对于模型就是模型本身及其训练好的权重值)带入到新 ...

  2. python接口自动化（十六）--参数关联接口后传（详解）

    简介 大家对前边的自动化新建任务之后,接着对这个新建任务操作了解之后,希望带小伙伴进一步巩固胜利的果实,夯实基础.因此再在沙场实例演练一下博客园的相关接口.我们用自动化发随笔之后,要想接着对这篇随笔操 ...

  3. Vue 进阶之路（五）

    之前的文章我们说了一下 vue 的样式绑定,这篇文章来介绍一下 vue 中的条件渲染,先看下面的代码: <!DOCTYPE html> <html lang="en&quo ...

  4. SpringBoot SpEL表达式注入漏洞-分析与复现

    目录 0x00前言 0x01触发原因 0x02调试分析 0x03补丁分析 0x04参考文章 影响版本: 1.1.0-1.1.12 1.2.0-1.2.7 1.3.0 修复方案:升至1.3.1或以上版本 ...

  5. 第5章 令牌自省端点(Token Introspection Endpoint) - IdentityModel 中文文档(v1.0.0)

    OAuth 2.0令牌自省的客户端库是作为HttpClient扩展方法提供的. 以下代码将引用令牌发送到内省端点: var client = new HttpClient(); var respons ...

  6. 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式（String，Hash，List，set，SetSorted ）

    很多小伙伴没接触过Redis,以至于去学习的时候感觉云里雾里的,就有一种:教程随你出,懂了算我输的感觉. 每次听圈内人在谈论的时候总是插不上话,小编就偷偷去了解了一下,也算是初入门径. 然后就整理了一 ...

  7. C# 数组比较--取得两个集合的交集,差集,并集的方法

    方法关键字: 交集:Intersect 差集:Except 并集:Union 使用代码: , , , , }; , , , , }; var 交集 = arr1.Intersect(arr2).ToL ...

  8. Android之Fragment详解

    文章大纲 一. 什么是Fragment二. Fragment生命周期三. Fragment简单实例四.Fragment实战五.项目源码下载六.参考文章   一. 什么是Fragment Fragmen ...

  9. 好代码是管出来的——使用Jenkins搭建CI服务器

    Jenkins是一个开源的跨平台的CI工具,它可以部署在Windows.Linux等平台上,并且Jenkins提供了非常丰富的插件来帮助完成编译.测试.部署等工作. 本文将介绍在Windows平台上使 ...

  10. SQLServer之分离数据库

    分离数据库注意事项 要求具有 db_owner 固定数据库角色中的成员资格. 可以分离数据库的数据和事务日志文件,然后将它们重新附加到同一或其他 SQL Server实例. 如果要将数据库更改到同一计 ...