web前端图片上传(3)--filereader

FileReader对象详解

最新推荐文章于 2024-11-27 16:22:51 发布

weixin_30878501

最新推荐文章于 2024-11-27 16:22:51 发布

阅读量89

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daniao11417/p/9923211.html

本文深入讲解FileReader对象的使用方法，包括将文件读取为DataURL、二进制数据及文本的实现过程，并通过实例演示如何在网页中展示读取结果。

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

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>FileReader</title>
 6     </head>
 7     <body>
 8         <p>
 9             <label>请选择一个文件：</label>
10             <input type="file" id="file" />
11             <input type="button" value="读取图像" onclick="readAsDataURL()" />
12             <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
13             <input type="button" value="读取文本文件" onclick="readAsText()" />
14         </p>
15         <div id="result" name="result"></div>
16         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
17         <script type="text/javascript">
18             var result = document.getElementById("result");
19             var file = document.getElementById("file");
20             //判断浏览器是否支持FileReader接口 
21             if(typeof FileReader == 'undefined') {
22                 result.InnerHTML = "<p>你的浏览器不支持FileReader接口！</p>";
23                 //使选择控件不可操作 
24                 file.setAttribute("disabled", "disabled");
25             }
26             function readAsDataURL() {
27                 //检验是否为图像文件 
28                 //var file = document.getElementById("file").files[0];//js的写法，也可以写成jquery的
29                 var file = $("#file").prop("files")[0];//jquery的写法
30                 if(!/image\/\w+/.test(file.type)) {
31                     alert("看清楚，这个需要图片！");
32                     return false;
33                 }
34                 var reader = new FileReader();
35                 //将文件以Data URL形式读入页面 
36                 reader.readAsDataURL(file);
37                 reader.onload = function(e) {
38                     console.log(this.result);
39                     var result = document.getElementById("result");
40                     //显示文件 
41                     result.innerHTML = '<img src="' + this.result + '" alt="" />';
42                 }
43             }
44 
45             function readAsBinaryString() {
46                 var file = document.getElementById("file").files[0];
47                 var reader = new FileReader();
48                 //将文件以二进制形式读入页面 
49                 reader.readAsBinaryString(file);
50                 reader.onload = function(f) {
51                     console.log(f);
52                     console.log(this.result);
53                     var result = document.getElementById("result");
54                     //显示文件 
55                     result.innerHTML = this.result;
56                 }
57             }
58 
59             function readAsText() {
60                 var file = document.getElementById("file").files[0];
61                 var reader = new FileReader();
62                 //将文件以文本形式读入页面 
63                 reader.readAsText(file);
64                 reader.onload = function(f) {
65                     var result = document.getElementById("result");
66                     //显示文件 
67                     result.innerHTML = this.result;
68                 }
69             }
70         </script>
71     </body>
72 </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)

转载于:https://www.cnblogs.com/daniao11417/p/9923211.html