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

时间 2019-12-20

标签 web 前端图片上传 filereader 栏目 HTML 繁體版

原文原文链接

　　这篇文章主要是为了介绍一种文件上传的方式。固然文件中是包含图片的。若是你们仔细看个人第一篇web前端图片上传(1)就会知道，其实也是按照这种方式上传你的，可是因为上次时间比较紧张，没有详细的介绍今天的主角filereader对象。今天就来好好的看看他。javascript

如下是他经常使用的几种方法。html

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版本的问题。java

readAsDataURL（）这个方法其实就是把这个文件转换成为了base64的格式，若是是中图片的话，那就是图片的base64格式。

readAsText（）这个方法就是读取成为文本，若是你上传的是一个txt的文件，那么是直接能够读出来大家的文本信息的，可是doc文档格式是不能够的。固然了，html的格式是能够的。

至于51行和52行的打印，是为了看到，到底是哪一个是我们须要的文件格式，发现了，this.result才是我们须要的东西。而里面的f并非。f.target.result这个才是我们须要的字段。

最后仍是附上我前两篇文章的连接吧。方便你们查阅。web前端图片上传(1)，web前端图片上传(2)