文档章节

Javascript URL对象的createObjectURL与revokeObjectURL使用

IamOkay
 IamOkay
发布于 2015/09/12 22:05
字数 543
阅读 6382
收藏 7

一.URL.createObjectURL 

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

参数:

File对象或者Blob对象

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

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

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


二.URL.revokeObjectURL

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

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

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

参数:

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


HTML代码:

<div id="forAppend" class="demo"></div>


JS代码:

var eleAppend = document.getElementById("forAppend");
window.URL = window.URL || window.webkitURL;
if (typeof history.pushState == "function") {
    var xhr = new XMLHttpRequest();    
    xhr.open("get", "/image/study/s/s256/mm1.jpg", true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        if (this.status == 200) {
            var blob = this.response;
            var img = document.createElement("img");
            img.onload = function(e) {
              window.URL.revokeObjectURL(img.src); // 清除释放
            };
            img.src = window.URL.createObjectURL(blob);
            eleAppend.appendChild(img);    
        }
    }
    xhr.send();
} else {
    eleAppend.innerHTML = '<p style="color:#cd0000;">浏览器不给力,还是早点回去给孩子喂奶吧~</p>';    
}


本文转载自:http://www.cnblogs.com/liulangmao/p/4262565.html

IamOkay

IamOkay

粉丝 204
博文 483
码字总数 403228
作品 0
海淀
程序员
私信 提问
常用jquery(1)

$("#zbxygltable tr").each(function(i,val){var stu = {};stu.zbstages= $(this).children().eq(0).find("select").val()stu.zbgrades = $(this).children().eq(1).find("select").val()stu......

上班不要玩手机
2016/11/16
14
0
js文件相关API

在表单中我们会用到上传文件的操作,现就文件相关API做以下总结。 文件相关的对象主要有5个。 Blob对象: 是一个代表二进制数据的基本对象。构造函数有两个参数,第一个参数为实际数据的数组,...

tiancai啊呆
2017/11/06
0
0
前端利用Blob对象创建指定文件并下载

一、Blob对象 Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件。 构...

joriewong
2018/05/25
0
0
【译】分享7个好用的JavaScript技巧

就像所有其他编程语言一样,JavaScript也有许多技巧可以完成简单和困难的任务。 一些技巧广为人知,而其他技巧则足以让你大吃一惊。 让我们来看看你今天就可以开始使用的七个JavaScript技巧吧...

米淇淋
05/07
0
0
WebViewJavaScriptBridge深入剖析

原文作者:CoderSpr1ngHall 原文地址:https://juejin.im/post/5cecd746e51d45778f076cac 前言 前一篇文章中,我们大致的讲述了一下JavaScriptCore这个库在iOS开发中的应用。在文中最后的阶段...

iOS开发_小迷糊
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SIPC的保全存证变现应用才是先见之明

Facebook发起的Libra在接连退群后终于在联盟链上线前官宣成立联盟,同时Telegram公链TON在主网上线前被美国SEC要求退回私募非法所得。两个都拥有活跃用户数上亿的社交平台,一个以1000万美元...

SimpleChain
26分钟前
3
0
Node_初步了解(3)回调,作用域,上下文

本文转载于:专业的前端网站➧Node_初步了解(3)回调,作用域,上下文 1. 1 //回调:回调是异步编程最基本的方法,node.js需要按顺序执行异步逻辑的时候,一般采用后续传递的方式,将后续逻辑...

前端老手
26分钟前
3
0
好程序员Java教程分享Java的五大特点

好程序员Java教程为大家分享Java的五大特点希望对初学者有所帮助。 一、Java的(五大)特点: 1.简单性 相对于c语言来说 c语言的核心 指针(保存地址)*p Java中没有指针的概念(使用的是引用概念...

好程序员官网
28分钟前
3
0
移动端rem适配各种屏幕字体

在页面中引入这个js文件,可以实现各个屏幕的字体自适应: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : ......

流年那么伤
30分钟前
4
0
2019我最喜爱的绿色应用活动投票开始,谁能突出重围?

在去年第一届软件绿色联盟开发者大会上,共有36个绿色应用荣获“2018年度我最喜爱的绿色应用”奖项。活动得到了消费者、开发者与应用厂商的一致好评,刚过完十一假期就有小伙伴们后台留言,问...

软件绿色联盟
40分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部