草庐IT

FileReader

程序大白兔 2023-04-09 原文

FileReader是一种异步读取文件机制。

FileReader提供了如下方法：

readAsArrayBuffer(file)：按字节读取文件内容，结果用ArrayBuffer对象表示

readAsBinaryString(file)：按字节读取文件内容，结果为文件的二进制串

readAsDataURL(file)：读取文件内容，结果用data:url的字符串形式表示

readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示

abort()：终止文件读取操作

方法详细：

1.abort

abort方法可以终止任何操作，在读取大文件的时候，这个方法能派上用场

示列 

    reader.abort();

2.readAsArrayBuffer

readAsArrayBuffer方法读取文件后，会在内存中创建一个ArrayBuffer对象（二进制缓冲区），将二进制数据存放在其中。通过此方式，可以直接在网络中传输二进制内容。

示列

  var reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = function () {
        console.log(this.result);
        console.log(new Blob([this.result]))
  }

3.readAsBinaryString

readAsBinaryString 方法会读取指定的 Blob 或 File 对象,当读取完成的时候，readyState 状态会变成DONE（已完成），并触发 loadend (en-US) 事件，同时 result 属性将包含所读取文件原始二进制格式。

示列

 var reader = new FileReader();
 reader.readAsBinaryString(file);
 reader.onload = function (e) {
    var arrayBuffer = reader.result;
 }

4.readAsDataURL

readAsDataURL 方法会读取指定的 Blob 或 File 对象。并生成data URl(base64编码)。

示列

   var reader=new FileReader
   reader.readAsDateURL(file);
   reader.onload = function (e) {
      var dataUrl = reader.result;
   }

 5.readAsText

readAsText方法可以用来读取文本文件，这个文件有两个参数，第一个参数用来读取File对象或Blob对象。第二个参数用来指定文件的编码，这是个可选参数，默认值为国际通用的UTF-8编码格式。

示列

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function () {
     vat txt = reader.result;
}

readAsText读取TXT文本文件乱码问题：

之前有过用默认编码方式进行读取TXT文件，会出现中文乱码，后面把reader.readAsText(file,'编码')的编码方式改为'gb2312’就不乱码了。

FileReader事件：

onloadstart：读取文件开始时触发
onprogress：读取过程中触发，会返还本次读取文件的最大字节数和已经读取完毕的字节数，可以用来做进度条
onabort：在读取中断时触发
onerror：在读取文件失败时触发
onload：在读取完成时触发
onloadend：读取结束后触发，不论成功还是失败都会触发，触发时机在onload之后

提示：

因为FileReader的操作都是异步的，所以对有些需要同步获取数据的不能实现。

这里提一个方法 ，可以用promise队列（链接：promise_程序大白兔的博客-CSDN博客）来完美解决异步问题

FileReaderltgtquot

有关FileReader的更多相关文章

  1. javascript - FileReader.readAsDataURL 上传到 express.js - 2

    我有以下代码要上传到我的Node.js/Express.js后端。varreader=newFileReader();reader.readAsDataURL(file);reader.onload=function(e){varresult=http.post('/files',e.target.result);result.success(function(){alert('done'):});}我的路线是这样的:app.post('/files',function(req,res){varcws=fs.createWriteStream(__dirname+'/media/fil

  2. javascript - 如何使用 FileReader 读取二进制文件以便在 CryptoJS 中使用 SHA-256 对其进行哈希处理？ - 2

    如何使用javascript将UTF-8字符串转换为Latin1编码字符串？这是我正在尝试做的事情:我得到一个文件，通过读取数组缓冲区将其拆分成block然后，我将数组缓冲区解析为字符串并使用以下代码将其传递给cryptoJS以进行哈希计算:cryptosha256=CryptoJS.algo.SHA256.create();cryptosha256.update(text);hash=cryptosha256.finalize();对于文本文件，这一切都适用。使用散列非文本文件(图像/.wmv文件)的代码时出现问题。我在另一个博客中看到CryptoJS作者要求使用Latin1格式而不

  3. javascript - 从 FileReader() 返回字节数组 - 2

    我需要一些帮助从下面的这个函数返回“bytes”变量以用作另一个函数的输入。functionopenfile(){varinput=document.getElementById("files").files;varfileData=newBlob([input[0]]);varreader=newFileReader();reader.readAsArrayBuffer(fileData);reader.onload=function(){vararrayBuffer=reader.resultvarbytes=newUint8Array(arrayBuffer);console.l

  4. javascript - HTML 4 等同于 HTML 5 的 FileReader？ - 2

    我有一个网页需要能够从运行浏览器的本地计算机将文件加载到DOM中。我发现使用HTML5文件API很容易做到这一点。我可以做到:varreader=newFileReader();reader.onload=function(fileContents){...loadcontentstoadiv...}reader.readAsText(f)//wherefisanHTML5Fileobject烦人的是，我需要它在IE7和一些不支持API的早期版本的Firefox中工作。有什么简单的方法可以在旧版浏览器中将本地文件加载到DOM中吗？非常感谢! 最佳答案

  5. javascript - 在 Angular 2 中使用 FileReader 上传文件和读取数据 - 2

    我正在尝试在Angular2ts(2.2.1)中创建一个上传表单，它允许上传例如一个CSV文件，但我不想将文件直接发送到http服务，而是希望首先在浏览器中验证该文件。到目前为止，我已经可以使用以下代码上传文件并在控制台中打印它:文件上传的HTML输入在我的Angular组件中，我设置了eventListner和文件阅读器。exportclassUploadComponent{publicfileString;constructor(){this.fileString;}changeListener($event):void{this.readThis($event.target);}

  6. javascript - FileReader 与 window.URL.createObjectURL - 2

    我正在构建一个移动网站，我想使用CameraAPI来拍照。图片应显示在网站上并上传到服务器。根据introductiontotheCameraAPIonMDN可以使用FileReader或window.URL.createObjectURL在网站上访问和显示图像。我tested这些可能的解决方案在iPad(Safari和Chrome)和Android平板电脑(Chrome和Firefox)上成功运行。FileReader和window.URL.createObjectURL有什么区别？我认为window.URL.createObjectURL较新，但还不是标准。性能有区别吗？

  7. javascript - 在使用 FileReader 上传之前预览图像，旋转图像 - 2

    我看到很多关于在上传前查看图片的帖子。一篇文章有​​一个使用FileReader实现的非常简单的方法:functionreadURL(input){if(input.files&&input.files[0]){varreader=newFileReader();reader.onload=function(e){$('#preview_image').attr('src',e.target.result);}reader.readAsDataURL(input.files[0]);}}$("#image_input").change(function(){readURL(this);

  8. javascript - Firefox -- 仅当从 Web Worker 调用时为 "FileReader is not defined" - 2

    在Firefox中，以下代码在主浏览器线程中正常运行时可以正常工作--varfr=newFileReader();..但是当从webworker运行时，会抛出以下错误:FileReaderisnotdefined相同的代码在Chrome和Safari中运行良好。对于在Firefox的网络worker中支持FileReader有什么建议吗？ 最佳答案 正如adeneo所指出的，WebWorkers中的Firefox似乎根本不支持FileReader。我能够使用FileReaderSync来完成我需要的。

  9. javascript - 如何在 javascript Filereader 中将 .png 格式的图像转换为 .jpg 格式？ - 2

    我开发了web应用程序，我正在使用文件阅读器来选择图像，因为我必须将图像.png格式转换为.jpeg格式。请帮助我完成任务。提前致谢。 最佳答案 这绝对可以通过HTML5canvas元素实现。只需在Canvas中绘制图像即可。(如果需要，可以隐藏Canvas元素)。然后使用canvas.toDataURL("image/jpeg");获取所需格式的图像的Base64符号。查看:http://davidwalsh.name/convert-canvas-image 关于javascript

  10. javascript - Html5 filereader - 读取本地 Json Array 文件并仅显示特定部分 - 2

    我是初学者，来自VBAexcel编程工具。在VBA中读取excel文件，操作excel内容比Filereader和Jsonarray这样的网络工具要容易得多。我的Json数组文件中有以下内容。[["TWE",6000,4545.5],["RW",1000,256.3]]我想从下面的html文件中读取并只显示值253.6你能帮帮我吗这里是Html文件阅读器示例functionhandleFileSelect(){if(window.File&&window.FileReader&&window.FileList&&window.Blob){}else{alert('TheFileAPIs

随机推荐