blob大文件切片及上传
来源:互联网 发布:考研有多难放弃知乎 编辑:程序博客网 时间:2024/06/02 06:38
[JS进阶] JS 之Blob 对象类型
z
什么是Blob?
Blob 是什么? 这里说的是一种Javascript的对象类型。
oracle 中也有类似的栏位类型。
在
[JS进阶] HTML5 之文件操作(file)
这一篇中用到了File对象,而实际上 file 对象只是 blob 对象的一个更具体的版本,blob 存储着大量的二进制数据,并且 blob 的 size 和 type 属性,都会被 file 对象所继承。所以, 在大多数情况下,blob 对象和 file 对象可以用在同一个地方,例如,可以使用 FileReader 借口从 blob 读取数据,也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。
如何创建Blob
1. 使用旧方法创建 Blob 对象。
旧的方法使用 BlobBuilder 来创建一个Blob 实例,并且使用一个 append() 方法,将字符串(或者 ArrayBuffer 或者 Blob,此处用 string 举例)插入,一旦数据插入成功,就可以使用 getBlob() 方法设置一个 mime 。
- <script>
- var builder = new BolbBuilder();
- builder.append(”Hello World!”);
- var blob = builder.getBlob(“text/plain”);
- </script>
<script>
var builder = new BolbBuilder();
builder.append("Hello World!");
var blob = builder.getBlob("text/plain");
</script>
2. 新方法创建Blob 对象
在新的方法中直接可以通过 Blob() 的构造函数来创建了。
构造函数,接受两个参数,第一个为一个数据序列,可以是任意格式的值,例如,任意数量的字符串,Blobs 以及 ArrayBuffers。第二个参数,是一个包含了两个属性的对象,其两个属性分别是:
type – MIME 的类型。
endings – 决定 append() 的数据格式,(数据中的 \n 如何被转换)可以取值为 “transparent” 或者 “native”(t* 的话不变,n* 的话按操作系统转换;t* 为默认) 。
- <script>
- var blob = new Blob([“Hello World!”],{type:“text/plain”});
- </script>
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"});
</script>
Blob的应用
1. 大文件分割 (slice() 方法)
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!”);
- }
- }
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!");
}
}
2. 在Chrome 中指定下载的文件名;
具体可以参考:
Web 端 js 导出csv文件(使用a标签)
浏览器支持
- blob大文件切片及上传
- PHP大文件上传(切片上传)
- 文件上传之切片
- 文件切片上传
- 图片文件上传(blob)
- 使用Struts+Hibernate上传大对象(BLOB)
- 切片上传
- oracle中blob和clob文件上传
- java 文件上传到数据库为blob
- struts2文件上传(保存为BLOB格式)
- struts2文件上传(保存为BLOB格式)
- .net上传文件,大文件及下载方式汇总(转)
- .net上传文件,大文件及下载方式汇总
- IS7及IIS7.5上传大文件设置
- HttpURLConnection上传大文件内存溢出的原因及解决办法
- 用JAVA实现大文件上传及显示进度信息
- JAVA实现大文件上传及显示进度信息
- 用JAVA实现大文件上传及显示进度信息
- ViewPager加载Fragment懒加载
- 图的遍历
- 729. My Calendar I
- MySQL之权限管理
- 选择排序
- blob大文件切片及上传
- 29. Divide Two Integers
- k、M、G、T 硬盘单位-简单说
- Kettle数据流中空字符串和NULL值
- Ant之build.xml配置详解
- 移动端并发编程基础篇
- thinkphp 微信授权登录 以及微信实现分享
- 编程之路小细节-数组和集合作为参数的查询
- linux 文件操作: