.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. AVR开发 Arduino方法（一） 端口子系统

    Arduino UNO R3使用的主处理器ATMega328P上有3个8位的输入/输出端口,它们分别是PB,PC和PD.Arduino IDE提供的Blink示例可以帮助我们了解端口的数字输出功能: ...

  2. Backpropagation 算法的推导与直观图解

    摘要 本文是对 Andrew Ng 在 Coursera 上的机器学习课程中 Backpropagation Algorithm 一小节的延伸.文章分三个部分:第一部分给出一个简单的神经网络模型和 B ...

  3. H5投放在朋友圈广告做压力测试

    一.环境 MacOS Sierra 二.背景 朋友圈广告投放的H5需要做ab压测,这里不赘述. 具体官方文档如下:http://ad.weixin.qq.com/learn/n10 三.正文 (1)别 ...

  4. python--DenyHttp项目（1）--GUI:tkinter☞ module 'tkinter' has no attribute 'messagebox'

    AttributeError: module 'tkinter' has no attribute 'messagebox' improt tkinter from tkinter import * ...

  5. SpringBoot填坑系列---XML方式配置数据库

    本次只是简单的运用SpringBoot搭建框架,对其原理并不做深入的探究 1.POM文件 <?xml version="1.0" encoding="UTF-8&q ...

  6. uiautomator +python 实现安卓自动化

    很多人看到这个题目我相信他们可能会说,uiautomator不是java开发的吗?python怎么用呢,其实呢 ,一开始我也是这么想的,看了金阳光老师的视频,也是用java写的,我表示不服,我要科学上 ...

  7. [STM32F429-DISCO-HAL]4.Uart 的使用

    今天来学习一下最常用的外设之一USART. 首先是硬件的连接,我们需要至少三根线,GND,TX,RX.参阅datasheet.默认的USART1_TX和USART1_RX的引脚如下图 关于HAL dr ...

  8. SpringMVC详解（一）------入门实例

    本系列教程我们将详细的对SpringMVC进行介绍,相信你在学完本系列教程后,一定能在实际开发中运用自如. 1.什么是 SpringMVC ? 在介绍什么是 SpringMVC 之前,我们先看看 Sp ...

  9. 剑指OFFER——顺时针打印矩阵

    输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2,3,4,8 ...

  10. 为什么新生代内存需要有两个Survivor区

    转载自:http://blog.csdn.net/antony9118/article/details/51425581 在JVM的新生代内存中,为什么除了Eden区,还要设置两个Survivor区? ...