使用FileReader实现前端图片上传及预览

  时间:2018-11-07
本文章向大家介绍使用FileReader实现前端图片上传及预览,需要的朋友可以参考一下

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

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

  1. abort  none 中断读取
  2. readAsBinaryString file(blob) 将文件读取为二进制码
  3. readAsDataURL file(blob) 将文件读取为 DataURL
  4. 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这个才是咱们需要的字段。

原文地址:http://www.manongjc.com/article/17715.html