这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇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. Java的多态浅谈

    概述 Java的四大基本特性:抽象,封装,继承和多态.其中,抽象,封装,继承可以说多态的基础,而多态是封装,继承的具体表现.如果非要用专业术语来描述什么是多态的话 多态是指程序中定义的引用变量所指向具 ...

  2. SpringCloud学习系列之二 ----- 服务消费者(Feign)和负载均衡(Ribbon)使用详解

    前言 本篇主要介绍的是SpringCloud中的服务消费者(Feign)和负载均衡(Ribbon)功能的实现以及使用Feign结合Ribbon实现负载均衡. SpringCloud Feign Fei ...

  3. 你必须知道的 SmartSql ！

    介绍 SmartSql = MyBatis + Cache(Memory | Redis) + R/W Splitting +Dynamic Repository + Diagnostics .... ...

  4. C# 错误:空对象不能转换为值类型

    最近在做项目的时候出现了一个错误 当从数据库中获取值的时候 报错:空对象不能转换为值类型 因为数据库你查询数据的时候不是所有的字段都是存在数据的,有些字段可能是Null值,也就是没有数据 当你在类型转 ...

  5. Mybaits-plus实战（二）

    1. Mybaits-plus实战(二) 1.1. mybatis-plus插件 1.1.1. 用法 先举个例子介绍用法,如下:直接作为Bean注入,一般来讲插件太多印象性能,所以大部分插件都只在测试 ...

  6. 结合JDK源码看设计模式——单例模式

    定义: 保证一个类仅有一个实例,并提供一个全局访问点 适用场景: 确保任何情况下这个对象只有一个实例 详解: 私有构造器 单利模式中的线程安全+延时加载 序列化和反序列化安全, 防止反射攻击 结合JD ...

  7. 设计模式之组合模式——Java语言描述

    组合模式又叫做部分整体模式,适用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次 介绍 意图 将对象组合成树形结构以表示"部分-整体" ...

  8. 【Teradata SQL】一个字段为空即取另外一个字段（连续取4个字段）-case when

    目标:如果col1为空则取col2的值,如果col2也为空则取col3的值,如果col3还为则取col4的值,如果四个字段均为空则取默认值 1.数据准备 create multiset table t ...

  9. 不带parent指针的successor求解

    问题: 请设计一个算法,寻找二叉树中指定结点的下一个结点(即中序遍历的后继).给定树的根结点指针TreeNode* root和结点的值int p,请返回值为p的结点的后继结点的值.保证结点的值大于等于 ...

  10. MVC详解：mvc是什么？为什么要用MVC?MVC工作原理以及MVC优缺点

    一.什么是MVC Model:模型层 View:视图层 Controller:控制层 MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户 ...