web前端图片上传(3)--filereader
程序员文章站
2023-11-13 18:18:04
这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇web前端图片上传(1)就会知道，其实也是按照这种方式上传你的，但是由于上次时间比较紧张，没有详细的介绍今天的主角filereader对象。今天就来好好的看看他。 以下是他常用的几种方法。 但是这个可能不好理解 ......
这篇文章主要是为了介绍一种文件上传的方式。当然文件中是包含图片的。如果大家仔细看我的第一篇就会知道，其实也是按照这种方式上传你的，但是由于上次时间比较紧张，没有详细的介绍今天的主角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)
上一篇： 微信小程序实现预览图片功能