HTML5 Blob对象的具体使用_html5教程技巧

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

使用PL/SQL从数据库中读取BLOB对象:1.首先,确认现有对象SQL>col fdesc for a30SQL>select fid,fname,fdesc from eygle_blob;FID FNAME FDESC1 ShaoLin.jpg 少林寺-康熙手书2 DaoYing.jpg 倒映2.创建7a64e59b9ee7ad9431333337383930存储DirectorySQL>connect/as sysdbaConnected.SQL>create or replace directory BLOBDIR as 'D:oradataPic';Directory created.SQL>SQL>grant read,write on directory BLOBDIR to eygle;Grant succeeded.SQL>3.创建存储过程SQL>connect eygle/eygleConnected.SQL>SQL>CREATE OR REPLACE PROCEDURE eygle_dump_blob(piname varchar2,poname varchar2)IS2 l_file UTL_FILE.FILE_TYPE;3 l_buffer RAW(32767);4 l_amount BINARY_INTEGER:=32767;5 l_pos INTEGER:=1;6 l_blob BLOB;7 l_blob_len INTEGER;8 BEGIN9 SELECT FPIC10 INTO l_blob11 FROM eygle_blob12 WHERE FNAME=piname;1314 l_blob_len:=DBMS_LOB.GETLENGTH(l_blob);15 l_file:=UTL_FILE.FOPEN('BLOBDIR',poname,'wb',32767);1617 WHILE l_pos18 DBMS_LOB.READ(l_blob,l_amount,l_pos,l_buffer);19 UTL_FILE.PUT_RAW(l_file,l_buffer,TRUE);20 l_pos:=l_pos+l_amount;21 END LOOP;2223 UTL_FILE.FCLOSE(l_file);2425 EXCEPTION26 WHEN OTHERS THEN27 IF UTL_FILE.IS_OPEN(l_file)THEN28 UTL_FILE.FCLOSE(l_file);29 END IF;30 RAISE;31 END;32/Procedure created.4.最后取出数据SQL>host ls-l d:oradataPictotal 7618rwxrwxrwa 1 gqgai None 2131553 Apr 19 10:12 DaoYing.jpgrwxrwxrwa 1 gqgai None 1768198 Apr 19 10:12 ShaoLin.jpgSQL>exec eygle_dump_blob('ShaoLin.jpg','01.jpg')PL/SQL procedure successfully completed.SQL>host ls-l d:oradataPictotal 11072rwxrwxrwa 1 Administrators SYSTEM 1768198 Apr 26 07:16 01.jpgrwxrwxrwa 1 gqgai None 2131553 Apr 19 10:12 DaoYing.jpgrwxrwxrwa 1 gqgai None 1768198 Apr 19 10:12 ShaoLin.jpgSQL>SQL>exec eygle_dump_blob('DaoYing.jpg','02.jpg')PL/SQL procedure successfully completed.SQL>host ls-l d:oradataPictotal 15236rwxrwxrwa 1 Administrators SYSTEM 1768198 Apr 26 07:16 01.jpgrwxrwxrwa 1 Administrators SYSTEM 2131553 Apr 26 07:19 02.jpgrwxrwxrwa 1 gqgai None 2131553 Apr 19 10:12 DaoYing.jpgrwxrwxrwawww.zgxue.com防采集请勿采集本网。

写在前面

length long length() throws SQLException返回由此 Blob 对象指定的 BLOB 值中的字节数。 BLOB 的字节长度 抛出: SQLException-如果访问 BLOB 的长度时发生错误 从以下版本开始: 1.2

本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景。

如何更新oracle数据库中blob对象的十六进制数值 public byte[]blob2ByteArr(Blob blob)throws Exception { byte[]b=null;try { if(blob!null){ long in=0;b=blob.getBytes(in,(int)(blob.length

Blob对象

因为你的数据库连接驱动版本太低了,没有重写PreparedStatement的setBlob(int index,InputStream inputstream)方法,只有setBlob(int index,Blob blob)所以你要重新下载一个mysql-connector-java

一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。

提交后,传入Action中进行判断,在action中返回null,将处理后的结果保存在json中,然后在JS中判断json的值并且alert出来

一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。

function read(){ var fs=document.getElementById('file').files[0];if(fs){ var reader=new new FileReader();reader.readAsDataURL(fs);function li(str){ var obj=document.createElement('li');obj.

Blob对象可以看做是存放二进制数据的容器,此外还可以通过Blob设置二进制数据的MIME类型。

创建Blob

通过构造函数

var blob = new Blob(dataArr:Array<any>, opt:{type:string});

dataArray:数组,包含了要添加到Blob对象中的数据,数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。

opt:对象,用于设置Blob对象的属性(如:MIME类型)

1、创建一个装填DOMString对象的Blob对象

2、创建一个装填ArrayBuffer对象的Blob对象

3、创建一个装填ArrayBufferView对象的Blob对象(ArrayBufferView可基于ArrayBuffer创建,返回值是一个类数组。如下:创建一个8字节的ArrayBuffer,在其上创建一个每个数组元素为2字节的“视图”)

通过Blob.slice()

此方法返回一个新的Blob对象,包含了原Blob对象中指定范围内的数据

Blob.slice(start:number, end:number, contentType:string)

start:开始索引,默认为0

end:截取结束索引(不包括end)

contentType:新Blob的MIME类型,默认为空字符串

var canvas = document.getElementById("canvas");canvas.toBlob(function(blob){ console.log(blob);});

应用场景

前面提到,File接口基于Blob,继承了Blob的功能并进行了扩展,故我们可以像使用Blob一样使用File对象。

分片上传

通过Blob.slice方法,可以将大文件分片,轮循向后台提交各文件片段,即可实现文件的分片上传。

分片上传逻辑如下: 获取要上传文件的File对象,根据chunk(每片大小)对文件进行分片 通过post方法轮循上传每片文件,其中url中拼接querystring用于描述当前上传的文件信息;post body中存放本次要上传的二进制数据片段 接口每次返回offset,用于执行下次上传

下面是分片上传的简单实现:

initUpload();//初始化上传function initUpload() { var chunk = 100 * 1024; //每片大小 var input = document.getElementById("file"); //input file input.onchange = function (e) { var file = this.files[0]; var query = {}; var chunks = []; if (!!file) { var start = 0; //文件分片 for (var i = 0; i < Math.ceil(file.size / chunk); i++) { var end = start + chunk; chunks[i] = file.slice(start , end); start = end; } // 采用post方法上传文件 // url query上拼接以下参数,用于记录上传偏移 // post body中存放本次要上传的二进制数据 query = { fileSize: file.size, dataSize: chunk, nextOffset: 0 } upload(chunks, query, successPerUpload); } }}// 执行上传function upload(chunks, query, cb) { var queryStr = Object.getOwnPropertyNames(query).map(key => { return key + "=" + query[key]; }).join("&"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxxx/opload?" + queryStr); xhr.overrideMimeType("application/octet-stream"); //获取post body中二进制数据 var index = Math.floor(query.nextOffset / query.dataSize); getFileBinary(chunks[index], function (binary) { if (xhr.sendAsBinary) { xhr.sendAsBinary(binary); } else { xhr.send(binary); } }); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4) { if (xhr.status === 200) { var resp = JSON.parse(xhr.responseText); // 接口返回nextoffset // resp = { // isFinish:false, // offset:100*1024 // } if (typeof cb === "function") { cb.call(this, resp, chunks, query) } } } }}// 每片上传成功后执行function successPerUpload(resp, chunks, query) { if (resp.isFinish === true) { alert("上传成功"); } else { //未上传完毕 query.offset = resp.offset; upload(chunks, query, successPerUpload); }}// 获取文件二进制数据function getFileBinary(file, cb) { var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function (e) { if (typeof cb === "function") { cb.call(this, this.result); } }}

以上是文件分片上传前端的简单实现,当然,此功能还可以更加完善,如后台需要对合并后的文件大小进行校验;或者前端加密文件,全部上传完毕后后端解密校验等,此处不做赘述。

通过url下载文件

window.URL对象可以为Blob对象生成一个网络地址,结合a标签的download属性,可以实现点击url下载文件

实现如下:

createDownload("download.txt","download file");function createDownload(fileName, content){ var blob = new Blob([content]); var link = document.createElement("a"); link.innerHTML = fileName; link.download = fileName; link.href = URL.createObjectURL(blob); document.getElementsByTagName("body")[0].appendChild(link);}

执行后页面上会生成此Blob对象的地址,点击后可下载:

查看下载结果:

通过url显示图片

我们知道,img的src属性及background的url属性,都可以通过接收图片的网络地址或base64来显示图片,同样的,我们也可以把图片转化为Blob对象,生成URL(URL.createObjectURL(blob)),来显示图片。

小结

本文主要介绍了Blob对象的属性和使用场景,其实我们可以看到,Blob对象作为一个装填二进制数据的基本对象,其作用也仅仅是一个容器,而真正的业务功能则需要通过FileReader、URL、Canvas等对象实现,之后会继续对这些对象的功能和应用场景进行归纳。

参考资料

[1] MDN_Blob

[2] W3C Working Draft

到此这篇关于HTML5 Blob对象的具体使用的文章就介绍到这了,更多相关HTML5 Blob对象内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

你好:BLOB(binary large object)-二进制大对象,是一个可以存储二进制文件的容器。在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。版BLOB是一个大文件,典型的BLOB是一张图片或一个声音文件,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。根据Eric Raymond的说法,处理BLOB的主要思想就是让文件处理器(如数据库管理器)不去理会文件是什么,而是关心如何去处理它。但也有专家强调,这种处理大数据对象的方法是把双刃剑,它有可权能引发一些问题,如存储的二进制文件过大,会使数据库的性能下降。在数据库中存放体积较大的多媒体对象就是应用程序处理BLOB的典型例子内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 blob 实现文件下载功能的示例代码
  • 深入解析html5中的blob对象的使用
  • 数据库中blob类型指什么类型
  • 如何使用PL/SQL读取数据库中的BLOB对象
  • 关于JDBC中从Oracle数据库读写Blob对象的问题,为什么在我的机子上报错
  • DB2中用SQL怎么插入一个BLOB对象
  • 如何在JAVA中判断clob或blob对象为空?
  • 如何更新oracle数据库中blob对象的十六进制
  • 在数据库里添加一条数据,添加blob对象时出现了异常,谁能帮我解答一下,不胜感激,之后补分。。 j
  • 关于JDBC中从Oracle数据库读写Blob对象的问题
  • 用js压缩处理后blob对象怎么上传
  • java 怎样将File 对象转换为Blob
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5blobhtml5 blob 实现文件下载功能的示例代码深入解析html5中的blob对象的使用html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解详解如何获取localstorage最大存储大小的方法html5的pushstate以及监听浏览器返回事件的实现html5用video标签流式加载的实现video.js支持m3u8格式直播的实现示例video实现有声音自动播放的实现方法基于html5 canvas做批改作业的小插件video下autoplay属性无效的解决方法(添加muted属性)html2canvas生成的图片偏移不完整的解决方法html5简介及新增功能介绍html5让容器充满屏幕高度或自适应剩余高度的布局实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved