.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. [硬件]_ELVE_VS2015下opencv3.3的配置问题

    0x00  引言 最近想搞一下摄像头,但是我的Windows版本是64位的,opencv3.3貌似也只支持64位系统了,所以就配置一下win10+vs2015+opencv3.3的环境变量,具体下载和 ...

  2. S2-032代码执行

    Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与Struts 1的体系结构差别 ...

  3. 简陋的 ASP.NET CORE 单页Web应用程序“框架”

    我对ASP.NET CORE了解不多,不知道是不是重复造轮子,也或者什么也不是,这个Demo是这样的: 1.非常简单或者说原始:2.将单页Web应用增加了一个页(Page)概念(相当于MVC的 Vie ...

  4. ecshop中的些assign_dynamic(’')

    很多做电子商务站的朋友都问我,在ecshop中,里面有个 assign_dynamic('index');这个到底是什么作用来的,这个其实是ecshop中的模板技术,动态处理一些局部信息更新而不被缓存 ...

  5. Lucene搜索引擎+HDFS+MR完成垂直搜索

    介于上一篇的java实现网络爬虫基础之上,这一篇的思想是将网络收集的数据保存到HDFS和数据库(Mysql)中:然后用MR对HDFS的数据进行索引处理,处理成倒排索引:搜索时先用HDFS建立好的索引来 ...

  6. ssh相关问题

    问题1 一般错误信息为:ssh: connect to host localhost port 22: Connection refused 这种错误很主要的一个原因是sshd服务没有启动,先启动ss ...

  7. java 数组的冒泡排序

    冒泡排序 (1)冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最 ...

  8. Qt实现九宫图类控件

    <1>. 头文件(类声明) class CPreviewWidge : public QWidget { Q_OBJECT public: CPreviewWidge( ); ~CPrev ...

  9. javascript今生前世

    事情得从一个chrome控制台中的无意打印说起. 众所周知,js共六种数据类型,string.number.undefined.boolean.object.null.当然javascript还准备了 ...

  10. python 第六天

    模块 包 我们可以同过包来避免与其它模块的命名冲突,例如,调用在外层 demo.py 调用 demoFile 文件夹中的demo.py 就可以通过 demo.demo 来调用 请注意,每一个包目录下面 ...