当前位置: 代码迷 >> 综合 >> FileReader 文件读取
  详细解决方案

FileReader 文件读取

热度:74   发布时间:2023-11-01 18:50:24.0

fileReader 读取文件

本文主要就是说一下 H5 fileReader 的使用

fileReader API

readAsBinaryString 读取二进制流
readAsDataURL 读取图片病进行base-64编码
readAsText 读取文本文件

code

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>fileReader</title>
</head>
<body><input type="file" id="lalala">
</body>
<script type="text/javascript">document.getElementById("lalala").onchange = function(){
     fileReader.readAsDataURL(this.id);}var fileReader = new FileReader();function FileReader() {
     this.getFile = function (id) {
     var file = document.getElementById(id).files[0];return file;}// 二进制流this.readAsBinaryString = function (fileId) {
     var file = this.getFile(fileId);var reader = new FileReader();reader.readAsBinaryString(file);reader.onload = function (f) {
     console.log(this);}};// data urlthis.readAsDataURL = function (fileId) {
     var file = this.getFile(fileId);var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (f) {
     console.log(this);}};// textthis.readAsText = function (fileId) {
     var file = this.getFile(fileId);var reader = new FileReader();reader.readAsText(file);reader.onload = function(f){
     console.log(this);}};} </script>
</html>

个人纯手打,有不当之处请留言,谢谢!