JavaScript之Blob对象类型的具体使用方法_javascript技巧

来源:脚本之家  责任编辑:小易  

如何通过javascript向sqlite存储blob数据SVN是C/S架构,数据存放分成服务器端和客户端。创建代码库一般指的是SVN服务器端的操作,这个库随便建在什么地方都可以;你要发布的线上代码,这是存放在SVN的客户端的。SVN的服务器端和客户端存放文件的格式是不同的,所以不能直接访问SVN服务.如果你的操作系统是windows,建议使用ToitorseSVN客户端,在我的百度文库里有在windows环境下使用SVN的培训PPTwww.zgxue.com防采集请勿采集本网。

Blob(Binary Large Object)术语最初来自数据库(oracle 中也有类似的栏位类型。),早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。 

差不多,在Access界面里可以嵌入一个文档或图片什么的。对编程来说,可以当做BLOB来理解,就是存二进制数据。

 在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

浏览器本身是多线程的 下载和播放视频走的是两个线程,不冲突 所以正常请求就可以实现边下边播 请采纳

构建一个Blob对象通常有三种方式: 通过Blob对象的构造函数来构建。 从已有的Blob对象调用slice接口切出一个新的Blob对象。 canvas API toBlob方法,把当前绘制信息转为一个Blob对象。下面只看第一种的实现:

SELECT concat 'select ', GROUP_CONCAT CASE WHEN t.DATA_TYPE='blob' THEN concat('HEX(',t.COLUMN_NAME,')')THEN t.COLUMN_NAME END 'from#表名#' FROM information_schema.`COLUMNS` t

用法:新方法创建Blob 对象(构造函数来构建)

你好: BLOB(binary large object)-二进制大对象,是一个可以存储二进制文件的容器。在计算机中,BLOB常常zhidao是数据库中用来存储二进制文件的字段类型。版 BLOB是一个大文件,典型的BLOB是

var blob = new Blob(array[optional], options[optional]);

Blob是指二进制大对象也就是英文Binary Large Object的所写,而Clob是指大字符对象也就是英文Character Large Object的所写。由此可见这辆个类型都是用来存储大量数据而设计的,其中BLOB是用来

构造函数,接受两个参数

第一个参数:为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。

第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型:

MimeType mimeType = MimeType.toEnum(file.getContentType());)。

<script> var blob = new Blob(["Hello World!"],{type:"text/plain"}); </script>

Blob对象的基本属性: size :Blob对象包含的字节数。(只读) type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。

原生对象构建Blob

<script type="text/javascript">window.onload = function() { var blob = new Blob(1234);}</script>

提示出错:

Uncaught TypeError: Failed to construct ‘Blob': The 1st argument is neither an array, nor does it have indexed properties.

原因在于Blob构造函数要求第一个参数必须是数组,而这里第一个参数既不是一个数组,也没有可索引的属性。既然这里提到了对象的可索引属性,让我联想到了类数组的概念,而Arguments就是一个很好的例子。来试一试:

<script type="text/javascript">function testArgumentsBlob() { var blob = new Blob(arguments); console.log(blob.size);//3 console.log(blob.type);//""}window.onload = function() { testArgumentsBlob(1, 2, 3);}</script>

可以看到即使是类数组对象,而数组元素类型是Number也能得出正确的结论,猜想大概是由于构造函数内部把Number转化为String的缘故吧!

再来试一试其他的参数类型:

window.onload = function() { var arg = {hello: "2016"}; var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"}); console.log(blob.type);//application/json console.log(blob.size);//20}

blob.type等于application/json没问题。arg转为字符串后的长度为16加上制表符\t的宽度4个字节等于20。

Blob对象的基本方法: 

大文件分割 (slice() 方法),slice方法与数组的slice类似。

Blob.slice([start, [end, [content-type]]])

slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。

当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。

不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 

可以写一个兼容各浏览器的方法:

function sliceBlob(blob, start, end, type) { type = type || blob.type; if (blob.mozSlice) { return blob.mozSlice(start, end, type); } else if (blob.webkitSlice) { return blob.webkitSlice(start, end type); } else { throw new Error("This doesn't work!"); } }

利用Blob显示缩略图`

var input = document.createElement("input");input.type = "file";input.accept = "image/*";input.multiple = true;input.style.display = "none";document.body.appendChild(input);var fileSelect = document.createElement("a");fileSelect.href = "#";fileSelect.appendChild(document.createTextNode("Choose files"));document.body.appendChild(fileSelect);var imgList = document.createElement("div");imgList.innerHTML = "<p>No file Selected!</p>"document.body.appendChild(imgList);input.addEventListener("change", function(e) {var files = this.files;if(!files.length) {return;}imgList.innerHTML = "";var list = document.createElement("ul");imgList.appendChild(list);for(var i = 0; i < files.length; i++) {var li = document.createElement("li"); list.appendChild(li);var img = document.createElement("img");img.src = window.URL.createObjectURL(files[i]);img.height = 60;img.width = 60;img.onload = function() {window.URL.revokeObjectURL(this.src);}li.appendChild(img);var info = document.createElement("span");info.innerHTML = files[i].name + ":" + files[i].size + " bytes";li.appendChild(info);}}, false);fileSelect.addEventListener("click", function(e) {input.click(); e.preventDefault();}, false);

由于File对象继承自Blob,所以我们可以很方便的利用File对象加载本地系统图片文件,并通过createObjectURL生成一个URL并加以显示。

SVN是C/S架构,数据存放分成服务器端和客户端。创建代码库一般指的是SVN服务器端的操作,这个库随便建在什么地方都可以;你要发布的线上代码,这是存放在SVN的客户端的。SVN的服务器端和客户端存放文件的格式是不同的,所以不能直接访问SVN服务.如果你的操作系统是windows,建议使用ToitorseSVN客户端,在我的百度文库里有在windows环境下使用SVN的培训PPT内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js中关于blob对象的介绍与使用
  • js实现把图片的绝对路径转为base64字符串、blob对象再上传
  • js自动下载文件到本地的实现代码
  • 使用js代码实现点击按钮下载文件
  • js下载文件并修改文件名
  • js下载文件|无刷新下载文件示例代码
  • javascript实现的浏览器下载文件的方法
  • javascript 用fetch 实现异步下载文件功能
  • 使用 javascript 创建并下载文件(模拟点击)
  • javascript使用blob对象实现的下载文件操作示例
  • 基于zepto.js实现手机相册功能
  • javascript按值删除数组元素的方法
  • js 编程笔记 无名函数
  • javascript中停止执行setinterval和settimeout事件的方法
  • fusioncharts图表显示双y轴双(多)曲线
  • bootstrap项目实战之子栏目资讯内容
  • 微信小程序开发之大转盘 仿天猫超市抽奖实例
  • array.prototype.slice 使用扩展
  • javascript事件冒泡机制原理实例解析
  • js createrange与createtextrange的一些用法实例
  • 如何通过javascript向sqlite存储blob数据
  • 如何通过javascript向sqlite存储blob数据
  • photo blob是什么?
  • ORACLE数据库BLOB如何转化类型
  • 请ACCESS数据库中的OLE类型到底是什么数据类型?和BLOB类型有什么区别?
  • JavaScript如何使用blob动态追加数据实现m3u8视频边下边播的功能?
  • mysql如何在查询语句中将blob自动以16进制显示出来
  • 数据库中blob类型指什么类型
  • Oracle中Blob和Clob的作用?
  • photo
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧js中关于blob对象的介绍与使用js实现把图片的绝对路径转为base64字符串、blob对象再上传js自动下载文件到本地的实现代码使用js代码实现点击按钮下载文件js下载文件并修改文件名js下载文件|无刷新下载文件示例代码javascript实现的浏览器下载文件的方法javascript 用fetch 实现异步下载文件功能使用 javascript 创建并下载文件(模拟点击)javascript使用blob对象实现的下载文件操作示例基于zepto.js实现手机相册功能javascript按值删除数组元素的方法js 编程笔记 无名函数javascript中停止执行setinterval和settimeout事件的方法fusioncharts图表显示双y轴双(多)曲线bootstrap项目实战之子栏目资讯内容微信小程序开发之大转盘 仿天猫超市抽奖实例array.prototype.slice 使用扩展javascript事件冒泡机制原理实例解析js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js删除数组里的某个元素方法javascript深入理解js闭包用javascript实现分割提取页面所需内容使用javascript获取页面名称js判断文件格式及大小的简单实例(必看)javascript prototype对象的属性说明高亮闪烁某个元素的js脚本bootstrap 通过加减按钮实现输入框组功能javascript客户端遍历控件与获取父容器对iframe thickbox2.0使用的方法javascript 开发工具webstrom使用指南基于bootstrap-datetimepicker.js不支持i
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved