把指向数据的URL保存到file或者blob对象里,好处就是不需要先文件读取内容然后才能用。

 

function createObjectURL(blob){
if (window.URL){
return window.URL.createObjectURL(blob);
} else if (window.webkitURL){
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}

返回一个URL字符串,指向内存地址,例如可以直接展示图片文件出来:
var filesList = document.getElementById(“files-list”);
EventUtil.addHandler(filesList, “change”, function(event){
var info = “”,
output = document.getElementById(“output”),
progress = document.getElementById(“progress”),
files = EventUtil.getTarget(event).files,
reader = new FileReader(),
url = createObjectURL(files[0]);
if (url){
if (/image/.test(files[0].type)){
output.innerHTML = “<img src=\”” + url + “\”>”;
} else {
output.innerHTML = “Not an image.”;
}
} else {
output.innerHTML = “Your browser doesn’t support object URLs.”;
}
});
直接把URL对象输出到img里,不需要把数据先读取到JavaScript。 img标签自己会从URL指向的内存地址拿图片

 

当不用的时候,应该清除掉,释放内存:
function revokeObjectURL(url){
if (window.URL){
window.URL.revokeObjectURL(url);
} else if (window.webkitURL){
window.webkitURL.revokeObjectURL(url);
}
}

URLs对象 blob URL的更多相关文章

  1. Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器

    最近项目的文件上传遇到一个问题,就是Taro的chooseImage传给回调的是一个Blob对象,一般来说,上传控件都会导出Data Url,而Taro给了一个Blob Url,问题在于,我直接令im ...

  2. HTML5中的二进制大对象Blob(转)

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  3. SharePoint 2013 对二进制大型对象(BLOB)进行爬网

    本文是参考MSDN文档做的示例,SharePoint 2013搜索二进制对象(BLOB),通过外部内容类型的方式将外部数据与SharePoint相关联,修改BCD模型,使SharePoint能够爬网外 ...

  4. BLOB二进制对象(blob.c/h)

    BLOB二进制对象(blob.c/h) 数据结构 struct blob_attr { uint32_t id_len; /** 高1位为extend标志,高7位存储id, * 低24位存储data的 ...

  5. JS对象转URL参数(原生JS和jQuery两种方式)

    转自:点击打开链接 现在的js框架将ajax请求封装得非常简单,例如下面: $.ajax({ type: "POST", url: "some.php", da ...

  6. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

  7. Base64转换二进制文件对象 Blob/Base64转换 File 对象

    function convertBase64UrlToBlob(urlData) { var arr = dataurl.split(','),//去掉url的头,并转换为byte type = ar ...

  8. 使用HashMap对象传递url參数有用工具类

    代码例如以下: package com.yanek.util; import java.util.ArrayList; import java.util.Collections; import jav ...

  9. SharePoint 2013 使用 RBS 功能将二进制大型对象 BLOB 存储在内容数据库外部。

    为每个内容数据库设置 BLOB 存储   启用并配置 FILESTREAM 之后,请按照以下过程在文件系统中设置 BLOB 存储.必须为要对其使用 RBS 的每个内容数据库设置 BLOB 存储. 设置 ...

随机推荐

  1. JSON和java对象的互转

    先说下我自己的理解,一般而言,JSON字符串要转为java对象需要自己写一个跟JSON一模一样的实体类bean,然后用bean.class作为参数传给对应的方法,实现转化成功. 上述这种方法太麻烦了. ...

  2. 终极解决方案 at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22) 报空指针

    java.lang.NullPointerException  at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22) 出现这种问题,可能有多方 ...

  3. 技术领导(Technical Leader)画像

    程序员都讨厌被管理,而乐于被领导.管理的角色由PM(project manager)扮演,具体来说,PM负责提需求.改改改.大多数情况,PM是不懂技术的,这也是程序员觉得PM难以沟通的原因.而后者由技 ...

  4. Linux下搭建tomcat和jre的环境

    1.下载linux版本的tomcat和jre tomcat下载:http://pan.baidu.com/s/1nt7D87J: jre下载:http://pan.baidu.com/s/1sj4hA ...

  5. MongoDB学习教程(1)

    1.简介: MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展的高性能数据 ...

  6. vuejs2-生命周期

    https://segmentfault.com/a/1190000008879966 1 声明周期图示 2 过渡

  7. ch6-条件渲染(v-if v-else v-else-if key管理可复用元素 v-show )

    1 v-if 1.1 简单使用 <h1 class="h1" v-if="ok">yes</h1> <script> var ...

  8. Java基础语法(上篇)

                     Java基础语法(上篇) 知识概要: (1)关键字的表示与规范       (2)标示符              (3)注释                (4 ...

  9. 扩展js,实现c#中的string.format方便拼接字符串

    //"{0}-{1}-{2}".format("xx","yy","zz") //显示xx-yy-zz String.p ...

  10. django使用xlwt导出excel文件

    这里只是mark一下导出的方法,并没有做什么REST处理和异常处理. 维护统一的style样式,可以使导出的数据更加美观. def export_excel(request): # 设置HttpRes ...