• Blob及其属性和方法
• File
• FileReader及其属性和方法
• URL及其属性和方法

历史上， JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。 ECMAScript 5 引入了 Blob 对象，允许直接操作二进制数据。

Blob 对象是一个代表二进制数据的基本对象，在它的基础上，又衍生出一系列相关的API，用来操作文件。

• File 对象：负责处理那些以文件形式存在的二进制数据，也就是操作本地文件；
• FileList 对象： File 对象的网页表单接口；
• FileReader 对象：负责将二进制数据读入内存内容；
• URL 对象：用于对二进制数据生成 URL

Blob (Binary Large Object) 对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

创建 Blob 类型的对象

1. new Blob()

var domstring = '<div>Hello world</div>';
var blob1 = new Blob([domstring], {type: 'text/html'});
var buffer = new ArrayBuffer(8);
var blob2 = new Blob([buffer], {type: 'text/plain'});
2. blob.slice()
 
此方法返回一个新的 Blob 对象，包含了原 Blob 对象中指定范围内的数据
 
 
Blob.slice(start:number, end:number, contentType:string)。start：开始索引，默认为0；end：截取结束索引（不包括end）；contentType：新Blob的MIME类型，默认为空字符串
 
Blob 对象的属性
 
Blob.size: Blob 对象中所包含数据的大小（字节）。该属性为只读；
Blob.type: 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。该属性为只读
 
Blob 应用实例
 
下面是一个使用XMLHttpRequest对象，将大文件分割上传的例子。
 
function upload(blobOrFile) {
  let xhr = new XMLHttpRequest();
  xhr.open('post', '/server', true);
  xhr.onload = function(e) {};
  xhr.send(blobOrFile);
document.querySelctor('input[type="file"]').addEventListener('change', function() {
  let blob = this.files[0];
  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk size
  const SIZE = blob.size;
  let start = 0;
  let end = BYTES_PER_CHUNK;
  while(start < end) {
    upload(blob.slice(start, end));
    start = end;
    end = start + BYTES_PER_CHUNK;
}, false);
 
File 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
 
File 对象可以用来获取某个文件的信息，还可以用来读取这个文件的内容。通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象。
 
用户在选择一个或者多个文件后，可以通过 File API访问这些File 对象，这些对象被包含在一个 FileList 对象中。所有 type 为 file 的 input 都有一个 files 属性，通过 Element.files 可以返回 FileList 对象。
 
    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
    <script>
        var fileInput = document.querySelector("#fileInput");
        fileInput.addEventListener("change", function (event) {
          // 文件列表对象
          var fileList = this.files;
          // 获取第一个文件
          var file = fileInput.files[0];
          // 文件名
          var filename = file.name;
          // 文件大小
          var filesize = file.size;
          //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
          var type = file.type; 
          // 文件的上次修改时间，格式为时间戳
          var lastModified = file.lastModified;
          // 文件的上次修改时间，格式为 Date 对象实例
          var lastModifiedDate = file.lastModifiedDate;
        }, false);
        console.log(fileList);
        // 上传了两个文件，FileList {0: File, 1: File, length: 2}
    </script>
</body>
File 对象的属性:
 
name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例
 
File 对象的方法：
 
File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
 
 
Blob.slice([start[, end[, contentType]]])
 
返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。
 
FileReader
 
我们知道 Blob 对象只是二进制数据的容器，本身并不能操作二进制，FileReader 对象就是专门操作二进制数据的，FileReader 主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。
 
var reader = new FileReader();
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。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
 
上传图片后直接进行预览，而不用先经过后台。
 
var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        // 将图片转成DataURL格式
        reader.readAsDataURL(file);
        reader.onload = function(){
            //读取完毕后输出结果
           document.getElementById("file_img").src = reader.result //显示上传的图片
           console.log(reader.result);
URL.createObjectURL(blob)
 
//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);
上面的代码会对二进制数据生成一个 URL ，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。
 
这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。
 
URL.revokeObjectURL(objectURL);
 
当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
 
<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="./lib/jquery.js"></script>
    <style type="text/css">
        #file{
            display: block;
            width: 400px;
            height: 300px;
            opacity:0;
            margin: -300px 0 0 0;            
        #preview{
            display: block;
            width: 400px;
            height: 300px;
    </style>
</head>
    <img id="preview" src="" alt="点击上传图片"/>
    <input type="file" id="file" />
</body>
</html>
<script type="text/javascript">
  $('#file').on('change', function(){
    //获取文件列表对象
    var fileList = $('#file')[0].files;
    //创建文件流获取文件地址
    var src = window.URL.createObjectURL(fileList[0]); 　　　　
    //设置图片路径  
    $("#preview").attr("src", src);
    $("#preview").load(function() {
      window.URL.revokeObjectURL(src);
    });
　});
</script>
Blob - Web API 接口参考 | MDN
 
Blob,FileReader全面解析
                    目录Blob及其属性和方法FileFileReader及其属性和方法URL及其属性和方法历史上，JavaScript 无法处理二进制数据。如果一定要处理的话，只能使用 charCodeAt() 方法，一个个字节地从文字编码转成二进制数据，还有一种办法是将二进制数据转成 Base64 编码，再进行处理。这两种方法不仅速度慢，而且容易出错。ECMAScript 5 引入了 Blob 对象...
				
FormData
简介：FormData接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用XMLHttpRequest.send()方法送出，如果发送请求时的编码类型被设为"multipart/form-data"，它会使用和表单一样的格式
基本使用：
const formData = new FormData();
formData.append('name1',...
				
关于Laravel
Laravel是一个具有表达力，优雅语法的Web应用程序框架。 我们认为，发展必须是一种令人愉悦的创造力，才能真正实现。 Laravel通过减轻许多Web项目中使用的常见任务来减轻开发工作的痛苦，例如：
 用于和存储的多个后端。
 直观的表达 。
 数据库不可知。
 Laravel易于访问，功能强大，并提供大型，强大应用程序所需的工具。
学习Laravel
 Laravel拥有所有现代Web应用程序框架中最广泛，最全面的和视频教程库，因此轻而易举地开始使用该框架。
 如果您不想读书，可以使用帮助。 Laracasts包含1500多个视频教程，涉及各种主题，包括Laravel，现代PHP，单元测试和JavaScript。 深入我们全面的视频库，提高您的技能。
Laravel赞助商
我们要感谢以下赞助Laravel开发的赞助商。 如果您有兴趣成为赞助
Blob是一个类文件的不可变的原始数据对象，非javascript原生数据类型，File对象就是继承自Blob对象，且在Blob的基础上进行扩展，以便支持用户系统上的文件。
最近在做以post请求方式导出excel时，想到了可以使用Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理，最后使用URL生成链接，供浏览器下载excel。
  vue2.x
  webpack3.x
Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 通常可以用于声音、视频等多媒体文件的存储；
new Blob(blobParts, options);
blobParts：数组类型，可以存放任意个ArrayBuffer、ArrayBufferView、Blob或DOMString（会编码为utf-8）；
options：可选，可以设置blob的type和endings；
 //通过FileReader读取数据
 var reader = new FileReader();
 //以下这两种方式我都可以解析出来，因为Blob对象的数据可以按文本或二进制的格式进行读取
 //reader.readAsBinaryString(blob);
 reader.readAsText(blob, 'utf8')
				
在一个ASP.NET Core MVC的控制器中，根据条件，可能返回一个Excel的文件流，也可能返回一个Json的错误信息，代码类似如下：
在前端，我用jquery的ajax访问后台
不管是返回json还是文件流，控制台的输出都是。
我一度以为是我的后台问题，我甚至把返回Json的代码改成这样：
结果还是一样。
我把前端代码中的删掉，调用倒是没问题了，但不管是文件流还是json，返回的形式都变成了Text。
我在ajax函数的success回调中打印xhr对象，才发现jquery封装的这个xhr对象，只提
通过NPM安装： 
npm install blueimp-canvas-to-blob
 这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ，您可以从中将它们复制到Web服务器提供的文件夹中。
 接下来，在HTML标记中包含缩小JavaScript Canvas to Blob脚本：
 < script src =" js/canvas-to-blob.min.js " > </ script >
 或者，包括非缩小版本：
 < script src =" js/canvas-to-blob.js " > </ script >
您可以按照与
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧
1）使用 XMLHttpRequest 对象获取图片url的Blob值
//获取图片的Blob值
function getImageBlob(url, cb) {
 var xhr  = new XMLHttpRequest();
 xhr.open(get, u
				
Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受 Blob 对象，我们先来使用 Blob 构造函数，创建一个 myBlob 对象，具体如下图所示：
如你所见，myBlob 对象含有两个属性：size 和 type。其中  属性用于表示数据的大小（以字节为单位）， 是 MIME 类型的