.URL.createObjectURL

URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.

语法:

objectURL = URL.createObjectURL(blob || file);

参数:

File对象或者Blob对象

这里大概说下File对象和Blob对象:

File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象.

Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.

注意点:

每次调用createObjectURL的时候,一个新的URL对象就被创建了.即使你已经为同一个文件创建过一个URL. 如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法. 当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它.

二.URL.revokeObjectURL

URL.revokeObjectURL()方法会释放一个通过URL.createObjectURL()创建的对象URL. 当你要已经用过了这个对象URL,然后要让浏览器知道这个URL已经不再需要指向对应的文件的时候,就需要调用这个方法.

具体的意思就是说,一个对象URL,使用这个url是可以访问到指定的文件的,但是我可能只需要访问一次,一旦已经访问到了,这个对象URL就不再需要了,就被释放掉,被释放掉以后,这个对象URL就不再指向指定的文件了.

比如一张图片,我创建了一个对象URL,然后通过这个对象URL,我页面里加载了这张图.既然已经被加载,并且不需要再次加载这张图,那我就把这个对象URL释放,然后这个URL就不再指向这张图了.

语法:

window.URL.revokeObjectURL(objectURL);

参数:

objectURL 是一个通过URL.createObjectURL()方法创建的对象URL.

 

这两个方法不支持低版本浏览器.

最后,给个综合栗子:

通过ajax获取一张图片,显示在页面里.

html:

<body>

    <button id="getPic">获取图片的Blob数据</button>

</body>

js:

//获取图片Blob数据

      document.getElementById(‘getPic‘).onclick = function(e){

        $.ajax({

          type:‘GET‘,

          url:‘img.png‘,

          resDataType:‘blob‘,

          imgType:‘png‘,

          success:function(resText,resXML){

            var img = document.createElement(‘img‘);

            var objectUrl = window.URL.createObjectURL(resText);

            img.src = objectUrl;

            img.onload = function(){

              window.URL.revokeObjectURL(objectUrl);

            };

            document.body.appendChild(img);

          },

          fail:function(err){

            console.log(err)

          }

        });

        e.preventDefault();

      }

指定返回的数据格式为blob二进制数据.

通过返回的图片二进制数据来创建一个对象URL.

当图片加载完成后释放对象URL.

ajax.js:

var $={};

$.ajax = function(options){

    //1.获取参数

    var type = options.type.toUpperCase() || ‘GET‘;

    var resDataType = options.resDataType || ‘string‘;

    var reqDataType = options.reqDataType || ‘string‘;

    var url = options.url;

    var data = options.data;

    var success = options.success;

    var fail = options.fail;

    var progress = options.progress;

    var imgType = options.imgType || ‘jpg‘;

    //2.获取xhr对象

    var xhr = $.getXhr();

    //3.建立连接

    xhr.open(type,url);

    /*指定返回数据的格式需要在发送请求之前*/

    if(resDataType===‘blob‘){

        xhr.responseType = ‘blob‘;

    }

//4.发送请求

    if(type===‘GET‘){

        xhr.send(null)

    }

    else if(type===‘POST‘) {

        if(progress){

            xhr.upload.onprogress = progress;

        }

        if(reqDataType===‘json‘){

            xhr.setRequestHeader(‘Content-Type‘,‘application/json;charset=UTF-8‘);

            data = JSON.stringify(data);  //只能发送字符串格式的json,不能直接发送json

        }

        if(reqDataType===‘string‘){

            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);

        }

        xhr.send(data);

    }

    //5.接收数据

    xhr.onreadystatechange = function(){

        if(this.readyState===4 && (this.status>=200 && this.status<300)){

            var res;

            if(resDataType===‘json‘){

                res = JSON.parse(this.responseText);

                success.call(this,res,this.responseXML)

            }

            if(resDataType===‘blob‘){

                res = new Blob([this.response],{type:‘image/‘+imgType});

                success.call(this,res)

            }

        }

    };

};

指定响应的格式是二进制数据.

使用xhr.response来获取响应的二进制数据,而不是xhr.responseText. 当定义了xhr.responseType=‘blob‘以后,xhr就没有responseText属性了.

这里虽然使用new Blob(),但其实不用它,直接返回xhr.response,一样是正确的.

参考原文: https://developer.mozilla.org/en-US/docs/Web/API/URL.revokeObjectURL

URL.createObjectURL() 与 URL.revokeObjectURL()的更多相关文章

  1. URL.createObjectURL和URL.revokeObjectURL

    一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里,新的对象URL ...

  2. JS获取当前网页内容，创建文件并下载，URL.createObjectURL和URL.revokeObjectURL

    有时候需要在前端侧对于动态生成的内容进行下载,比如页面上某一段文本信息,再比如对页面进行分享的时候,希望分享图片是页面内容的实时截图,此时,这个图片就是动态的,纯HTML显然是无法满足我们的需求的,借 ...

  3. 图片上传预览 （URL.createObjectURL）

    知识预备:1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定. ...

  4. URL.createObjectURL()

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  5. URL.createObjectURL()的使用方法

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

  6. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  7. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  8. html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

    /** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormD ...

  9. URL.createObjectURL() 实现本地上传图片 并预览功能

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...

随机推荐

  1. MySql学习笔记（四）

    MYSQL如何查看系统帮助: 1.查看官方API文档: http://dev.mysql.com/doc/ 2.通过Mysql中的help命令 比如:help create database MYSQ ...

  2. java解析xml汇总（转自倾城幻影-Java解析xml汇总，链接：http://www.cnblogs.com/jiugehuanying/archive/2012/01/12/2320058.html）

    [引言] 目前在Java中用于解析XML的技术很多,主流的有DOM.SAX.JDOM.DOM4j,下文主要介绍这4种解析XML文档技术的使用.优缺点及性能测试. [一.基础知识--扫盲] sax.do ...

  3. akoj-1059-Picture

    Description 给你一个矩形的宽度和高度,要求按sample output样例输出此矩形. Input 输入包含多组数据,每一组包含两个数N和M( 0 < N ,M , < 75 ...

  4. [技术] OIer的C++标准库 : 字符串库<string>

    引入 上次我在博客里介绍了OI中可能用到的STL中的功能, 今天我们接着来发掘C++标准库中能为OI所用的部分. 众所周知, OI中经常用到字符串相关的处理, 这时善用字符串库可以使一些操作更加简洁易 ...

  5. 福科田led漫反射灯条生产工序

    led漫反射灯条简称透镜灯条,它两个其实是一种产品.下面我来讲讲led漫反射灯条的生产工序.首先介绍的是led漫反射灯条的生产总流程. 一.      led漫反射灯条的生产总流程: 1.       ...

  6. layer初步使用

    type:基本层类型 layer提供了5种层类型.可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层). 若你采用layer.open({type: 1})方式 ...

  7. .NET并行计算和并发3-Invoke

    Control.Invoke 方法 (Delegate) 在拥有此控件的基础窗口句柄的线程上执行指定的委托. Invoke方法搜索沿控件的父级链,直到它找到的控件或窗口具有一个窗口句柄: 如果尚不存在 ...

  8. init.ora, pfile, spfile

    实例启动时,查找初始化参数文件的顺序为: spfile<sid>.oraspfile.orainit<sid>.ora 如果以上3个文件都不存在,则实例无法启动. init.o ...

  9. Silverlight——施工计划日报表（一）

    前一段时间,客户需要一个施工计划报表,要求能够直观的看到各个计划的实施时间,而且能够修改.琢磨着,决定用Silverlight搞定好了.效果如下: 用户可以通过右键菜单的[完成]选项来标记完成,左键选 ...

  10. Linux命令的学习

    mkdir -p 创建目录 (make directorys) p递归创建 ls -l(long)d(direcitory)显示目录或者文件 cd 切换目录  从"/"开始目录,/ ...