• Javascript之File和Blob函数的使用、创建文件上传服务器


    大纲

    1.File 和Blob 的使用和区别
    2.创建文件并上传
    3.其他方法:FileReader、createObjectURL、revokeObjectURL
    
    • 1
    • 2
    • 3

    1.File 和Blob 的使用和区别

    • File()
      (1) 作用:构造器,创建新的 File 对象实例
      (2) 语法:var myFile = new File( bits, name, [ options] )
      (3) 参数:

    bits:

    一个包含ArrayBufferArrayBufferViewBlob,或者 DOMString 对象的 Array,或者任何这些对象的组合,这是 UTF-8 编码的文件内容;

    name:

    文件名称,或者文件路径;

    options:

    选项对象,包含文件的可选属性
    type: DOMString,表示将要放到文件中的内容的 MIME 类型。默认值为 “”
    lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。

    实例:

    var file = new File(['Hello', '\n World'], 'hello-world.txt', {type: 'text/plain'})
    
    • 1
    • Blob()
      (1) 作用:Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本二进制的格式进行读取,也可以转换成 ReadableStream(只读流) 来用于数据操作。
      (2) 语法:var aBlob = new Blob( array, options )
      返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成
      (3) 参数:

    array

    一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings会被编码为UTF-8。

    options

    一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
    (1) type,默认值为 “”,它代表了将会被放入到blob中的数组内容的MIME类型;
    (2) endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: “native”,代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 “transparent”,代表会保持blob中保存的结束符不变

    实例:

    var blob = new Blob(['jyjin',  ' can always shock me!'])
    
    • 1

    2.创建文件并上传

    核心语法:

    • new File()
    • new Blob()
    • URL.createObjectURL()
    • a标签触发下载

    Blob创建文件并下载

    downloadFile(fileName, content)
    
    • 1
    function downloadFile(fileName, content) {
      // 定义触发事件的DOM
      var aLink = document.createElement('a');
      // 定义BLOB对象,声明文件内容
      var blob = new Blob([content, 'jyjin']);
      // 判定平台
      var isMac = navigator.userAgent.indexOf('Mac OS') > -1;
      // 定义事件对象 
      var evt = document.createEvent(isMac ? "MouseEvents" : "HTMLEvents");
      // 初始化事件
      // evt.initEvent("click", false, false);
      evt[isMac ? "initMouseEvent" : "initEvent"]("click", false, false);
      // 定义下载文件名称
      aLink.download = fileName;
      // 根据上面定义的 BLOB 对象创建文件 dataURL
      // URL.createObjectURL()
      aLink.href = URL.createObjectURL(blob);
      // 触发事件下载
      aLink.dispatchEvent(evt);
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    3.其他方法:FileReader、createObjectURL、revokeObjectURL

    FileReader

    FileReader 主要用于将文件内容读入内存,通过一系列异步接口,可以在主线程中访问本地文件

    构造函数

    var reader = new FileReader();
    
    • 1

    属性

    • FileReader.error:表示在读取文件时发生的错误;
    • FileReader.readyState:0-还没有加载任何数据, 1-数据正在被加载, 2-已完成全部的读取请求;
    • FileReader.result:文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作。

    事件

    • FileReader.onabort:处理 abort 事件。该事件在读取操作被中断时触发;
    • FileReader.onerror:处理 error 事件。该事件在读取操作发生错误时触发;
    • FileReader.onload:处理 load 事件。该事件在读取操作完成时触发;
    • FileReader.onloadstart:处理 loadstart 事件。该事件在读取操作开始时触发;
    • FileReader.onloadend:处理 loadend 事件。该事件在读取操作结束时(要么成功,要么失败)触发;
    • FileReader.onprogress:处理 progress 事件。该事件在读取 Blob 时触发

    方法

    • FileReader.abort():中止读取操作。在返回时,readyState 属性为DONE;
    • FileReader.readAsArrayBuffer():开始读取指定的 Blob 中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象;
    • FileReader.readAsBinaryString():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含所读取文件的原始二进制数据, 该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件;
    • FileReader.readAsDataURL():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容;
    • FileReader.readAsText():开始读取指定的 Blob 中的内容。一旦完成,result 属性中将包含一个字符串以表示所读取的文件内容, 该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

    URL.createObjectURL

    语法

    //blob参数是一个File对象或者Blob对象.
    var objecturl =  window.URL.createObjectURL(blob);
    
    • 1
    • 2

    上面的代码会对二进制数据生成一个 URL ,这个 URL 可以放置于任何通常可以放置 URL 的地方,比如 img 标签的 src 属性。需要注意的是,即使是同样的二进制数据,每调用一次 URL.createObjectURL 方法,就会得到一个不一样的 URL。

    这个 URL 的存在时间,等同于网页的存在时间,一旦网页刷新或卸载,这个 URL 就失效。(File 和 Blob 又何尝不是这样呢)除此之外,也可以手动调用 URL.revokeObjectURL 方法,使 URL 失效。

    URL.revokeObjectURL

    当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

    参考资料:

    JS-前端使用Blob和File:https://www.its203.com/article/zhq2005095/89069851
    参数添加:https://segmentfault.com/a/1190000019902025
    参数说明:http://www.360doc.com/content/19/1007/11/13328254_865297350.shtml
    文件上传方式、文档流:https://blog.csdn.net/jianleking/article/details/118442697

  • 相关阅读:
    Java面试题大全(整理版)1000+面试题附答案详解,最全面详细,看完稳了
    一篇文章就足够解决大数据实时面试
    Ollydbg 调试软件常用方法之断点
    上采样之反卷积操作
    小白学安全-漏洞编号的理解 CVE/CAN/BUGTRAQ/CNCVE/CNVD/CNNVD
    【Java基础】Set集合、HashSet集合、LinkedHashSet集合的概述和特点及哈希值
    【Apifox Helper】自动生成接口文档,IDEA+Apifox懒人必备
    k8s(kubernetes)怎么查看pod服务对应哪些docker容器
    WebDAV之葫芦儿·派盘+多彩笔记
    报错:crbug/1173575 non-js module files deprecated
  • 原文地址:https://blog.csdn.net/weixin_35773751/article/details/125990833