2022-06-15 来源：华纳网 责任编辑：谷雨 人气：
核心提示：知识点： 在H5读取文本及二进制文件

知识点：

在H5读取文本及二进制文件

 

本课内容：

大家好，欢迎来到谷雨课堂

 

前些节的课程中，

我们讲了如何生成读取Excel、生成图片等内容

本节我们来讲讲基础的实现，

就是如果在H5中来读取用户选择的文件，

我们常见的文件类型很多，

但所有文件其实存储在硬盘上都是二进制的，

有些文件可以直接读取内容，

我们称为文本文件

 

如果字符1，对应的16进制就是0x30

在物联网中，我们难免会遇到各种固件，

这些固件通常都是二进制文件，

这样我们就可以直接在网页中处理各种数据转换

 

用H5读取文件，最重要的就是

  •  
var reader = new FileReader();

不过，由于权限问题，

在通常的浏览器中，我们只能读取用户确认选择的文件或目录

之后可就可以设置不同的使用模式来操作内容了

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
//读取为文本reader.readAsText(file); 
//读取为二进制reader.readAsArrayBuffer(file); 
//读取为图片Base64URL形式reader.readAsDataURL(file); 
reader.onload=function(f){
} 

 

 

其中二进制的方式，用处很大，

在这里谷雨老师使用了一个转换为HEX的函数

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
function Bytes2HexString(arrBytes) {var str = "";for (var i = 0; i < arrBytes.length; i++) {var tmp;var num=arrBytes[i];if (num < 0) {                 tmp =(255+num+1).toString(16);            } else {                 tmp = num.toString(16);            }if (tmp.length == 1) {                  tmp = "0" + tmp;            }            str += tmp+" ";       }return str;}

 

HEX是以直接的16进制直接显示出来，

在调试各种网络协议时会非常方便

 

以下是全部源代码，

保存为HTML直接运行即可

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html><head><title>No.22 在H5读取文本及二进制文件</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></head><body><script type="text/javascript"> function Bytes2HexString(arrBytes) {var str = "";for (var i = 0; i < arrBytes.length; i++) {var tmp;var num=arrBytes[i];if (num < 0) {                 tmp =(255+num+1).toString(16);            } else {                 tmp = num.toString(16);            }if (tmp.length == 1) {                  tmp = "0" + tmp;            }            str += tmp+" ";       }return str;}
var result=document.getElementById("result"); var file=document.getElementById("file"); 
//判断浏览器是否支持FileReader接口 if(typeof FileReader == 'undefined'){             result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>"; //使选择控件不可操作             file.setAttribute("disabled","disabled");         } 
function readAsDataURL(){ //检验是否为图像文件 var file = document.getElementById("file").files[0]; if(!/image\/\w+/.test(file.type)){                 alert("请选择图片文件！"); return false;             } var reader = new FileReader(); //将文件以Data URL形式读入页面             reader.readAsDataURL(file);             reader.onload=function(e){ var result=document.getElementById("result"); //显示文件                 result.innerHTML='<img src="' + this.result +'" alt="" />';             }         } 
function readAsBinaryString(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以二进制形式读入页面             reader.readAsArrayBuffer(file);             reader.onload=function(f){ var result=document.getElementById("result"); var bytes = new Uint8Array(this.result);let hex = Bytes2HexString(bytes);
//显示文件 console.log(hex);                result.innerHTML=hex;             }         } 
function readAsText(){ var file = document.getElementById("file").files[0]; var reader = new FileReader(); //将文件以文本形式读入页面             reader.readAsText(file);             reader.onload=function(f){ var result=document.getElementById("result"); //显示文件                 result.innerHTML=this.result;             }         } </script><h1>No.22 在H5读取文本及二进制文件</h1><hr><p><input type="file" id="file" /><input type="button" value="图像文件" onclick="readAsDataURL()" /><input type="button" value="二进制文件" onclick="readAsBinaryString()" /><input type="button" value="文本文件" onclick="readAsText()" /></p><div id="result" name="result"></div></body></html>

 

 

 

 

 

完整的源代码可以登录【华纳网】下载。

https://www.worldwarner.com/






 





免责声明：本文仅代表作者个人观点，与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
精彩推荐