js文件、文件流、Base64、字符流、字节流

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

文件:<input type="file" name="myFile" id="myFile">   /*FileReader: 读取文件内容                 * 1.readAsText():读取文本文件(可以使用TxT打开的文件)，返回文本字符串，默认编码是UTF-8                 * 2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给                 用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接受了数据之后，再将                 数据存储。                 * 3.readAsDataURL(): 读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL                 是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源                 转换为base64编码的字符串形式，并且将这些内容直接存储在url中>>优化网站的加载速度和执行效率。                 * abort(): 中断读取 */         let dom = document.querySelector("#myFile")         dom.onchange = function(e) {             // 1.创建文件读取对象             var reader = new FileReader();             /*2. 读取文件，获取DataURL             2.1 说明没有任何的返回值：void： 但是读取完文件之后，它会将读取的结果存储在文件读取对象的result中             2.2 需要传递一个参数 binary large object： 文件(图片获取其他可以嵌入到文档的类型)             2.3 文件存储在file表单元素的files属性中，它是一个数组*/             var file = document.querySelector("#myFile").files;             console.log('读取文件', file[0])             let type = file[0].type;             // reader.readAsDataURL(file[0])                       reader.readAsText(file[0])             /*获取数据              * FileReader提供一个完整的事件模型，用来捕获读取文件是的状态              * onabort： 读取文件中段时触发              * onerror： 读取错误时触发              * onload： 文件读取成功完成时触发              * onloadend： 读取完成时触发，无论成功还是失败              * onloadstart： 开始读取时触发              * onprogress： 读取文件过程中持续触发              */             reader.onload = function() {                 console.log('读取文件base64', reader.result)                 let blob = new Blob([reader.result], {                     type                 })                 console.log('获取文件流',blob)                 let session = new HttpSession("jstack");                 process(reader.result);                       }         }

1、获取文件信息

?

1 2 3 4 5 6

let dom = document.querySelector("#myFile")         dom.onchange = function(e) {             var reader = new FileReader();             var file = document.querySelector("#myFile").files;             console.log('读取文件', file[0])         }

　　

 

2、获取文件流

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

let dom = document.querySelector("#myFile")         dom.onchange = function(e) {                           var reader = new FileReader();             var file = document.querySelector("#myFile").files;             let type = file[0].type;             reader.readAsText(file[0])             reader.onload = function() {                 let blob = new Blob([reader.result], {                     type                 })                 console.log('获取文件流',blob)             }         }

【结果】　

3、获取Base64

?

1 2 3 4 5 6 7 8 9 10 11 12

let dom = document.querySelector("#myFile")         dom.onchange = function(e) {                           var reader = new FileReader();             var file = document.querySelector("#myFile").files;             let type = file[0].type;             reader.readAsDataURL(file[0])             reader.onload = function() {                 console.log('读取文件base64', reader.result)                       }         }

　　【结果】

 4、获取字符流

?

1 2 3 4 5 6 7 8 9 10 11

let dom = document.querySelector("#myFile")     dom.onchange = function(e) {         var reader = new FileReader();         var file = document.querySelector("#myFile").files;         let type = file[0].type;         reader.readAsText(file[0])         reader.onload = function() {             console.log('读取文本文件 获取字符流', reader.result)                   }     }

　　

 5、获取字节流

?

1 2 3 4 5 6 7 8 9 10 11

let dom = document.querySelector("#myFile")         dom.onchange = function(e) {             var reader = new FileReader();             var file = document.querySelector("#myFile").files;             let type = file[0].type;             reader.readAsArrayBuffer(file[0])             reader.onload = function() {                 console.log('读取文本文件 获取字符流', reader.result)                           }         }