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

    前言 在我们平时的工作或者面试中,都会经常遇到“反射”这个知识点,通过“反射”我们可以动态的获取到对象的信息以及灵活的调用对象方法等,但是在使用的同时又伴随着另一种声音的出现,那就是“反射”很慢,要少 ...

  2. SpringCloud分布式微服务搭建（二）

    这个例子主要是将zuul和eureka结合起来使用,zuul作为反向代理,同时起到负载均衡的作用,同时网关后面的消费者也作为服务提供者,同时提供负载均衡. 一.API网关(摘自百度) API网关是一个 ...

  3. BugkuCTF~Mobile~WriteUp

    最近,开始记录一篇关于 Android 逆向分析的 WriteUp 方便有需要的人学习,也欢迎大家相互交流, 发现不 一样的世界. 一. signin 考点:反编译.静态分析 Topic Link:h ...

  4. netcore编程之后面对不习惯的xshell黑屏部署，是时候使用jenkins自动化发布工具了

     在很久之前net还只能在windows上部署的时候,或许很多创业公司的朋友发布项目还都是人肉部署,反正windows都是可视化的界面,拖拖拉拉,开开关关还不 是特别麻烦...现如今你的项目需要在li ...

  5. .net mvc前台如何接收和解析后台的字典类型的数据

    很久没有写博客了,最近做了一个公司门户网站的小项目,其中接触到了一些我不会的知识点,今日事情少,便记录一下,当时想在网上搜索相关的内容,但是没有找到. 今天想记录一下这样一个小的需求的做法.先说一下我 ...

  6. BFPRT算法

    解决的问题:在一个数组中找到最小的k个数 常规解法:1.排序,输出前k个数,时间复杂度O(n*log(n)). 2.利用一个大小为k的大根堆,遍历数组维持大根堆,最后返回大根堆就可以了,时间复杂度O( ...

  7. Google XSS Challenge

    https://xss-game.appspot.com/level1 https://xss-game.appspot.com/level1 payload: <svg onload=aler ...

  8. Cesium 海拔 经纬度 展示

    通过参考http://gishome.net.cn/cesium/cesium-coordinates/,整理修改后 <!DOCTYPE html><html lang=" ...

  9. 章节十、2-用Linktext和PartialLinkText、ClassName、TagName定位元素

    一.通过内容的方式定位元素 使用Linktext和PartialLinkText定位元素的前提需要"文本"在“a”标签内,selenium才可以找到链接文本或者部分链接文本的元素. ...

  10. MongoDb 集群不可用后SECONDARY节点强制启动

    机房意外断电断网不得不预防,下面模拟测试某机房断电断网,B机房断电断网后A机房可正常提供服务,A机房断电断网后可能需要强制重启继续提供服务了,目前查看数据都还在,暂时没验证是否有数据丢失,小试了一把. ...