web前端图片上传(3)--filereader
2018-11-09 02:35:46来源：博客园 阅读 ()
这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇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)
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 微信小程序开发图片拖拽实例详解 2020-03-16
- javascript如何获取图片颜色 2020-03-08
- js调用刷新界面的几种方式 2020-03-05
- 高性能JavaScript循环语句和条件语句 2020-02-21
- 鼠标放在图片上显示大图的JS代码 2020-02-20
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
