js中blob对象介绍和实现切片上传

一、js中blob对象介绍

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。 

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

要从其他非 blob 对象和数据构造一个 Blob,请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob,请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 File 文档。

接受 Blob 对象的 API 也被列在 File 文档中。

注意:slice() 方法原本接受 length 作为第二个参数,以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小,则返回从开始到结尾的所有数据。

注意:slice() 方法在某些浏览器和版本上带有浏览器引擎前缀:比如 Firefox 12 及更早版本的blob.mozSlice() 和 Safari 中的blob.webkitSlice()。没有浏览器引擎前缀的老版本 slice() 方法有不同的语义,并且已过时。Firefox 30 取消了对 blob.mozSlice() 的支持。

构造函数

Blob(blobParts[, options])

标准语法:var aBlob = new Blob( array, options );
  • array 是一个由ArrayBufferArrayBufferViewBlobDOMString 等对象构成的 Array,或者其他类似对象的混合体,它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
  • options 是一个可选的BlobPropertyBag字典,它可能会指定如下两个属性:
    • type,默认值为 "",它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
    • endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持 blob 中保存的结束符不变

返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。

属性

Blob.size 只读

Blob 对象中所包含数据的大小(字节)。

Blob.type 只读

一个字符串,表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知,则该值为空字符串。

方法

Blob.slice([start[, end[, contentType]]])

返回一个新的 Blob 对象,包含了源 Blob 对象中指定范围内的数据。

Blob.stream()

返回一个能读取 blob 内容的 ReadableStream

Blob.text()

返回一个 promise 且包含 blob 所有内容的 UTF-8 格式的 USVString

Blob.arrayBuffer()

返回一个 promise 且包含 blob 所有内容的二进制格式的 ArrayBuffer 

Blob 构造函数用法举例

Blob 构造函数允许通过其它对象创建 Blob 对象。比如,用字符串构建一个 blob:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

BlobBuilder 接口提供了另外一种创建Blob 对象的方式,但该方式现在已经废弃,不应继续使用:

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');

使用 Blob 创建一个指向类型化数组的 URL

参考下面的代码:

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray.buffer], {type: 'application/octet-stream'}); // 传入一个合适的 MIME 类型
var url = URL.createObjectURL(blob);
// 会产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的 URL 字符串
// 你可以像使用普通 URL 那样使用它,比如用在 img.src 上。

从 Blob 中提取数据

一种从 Blob 中读取内容的方法是使用 FileReader。以下代码将 Blob 的内容作为类型数组读取:

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result 包含被转化为类型数组 typed array 的 blob
});
reader.readAsArrayBuffer(blob);

另一种读取 Blob 中内容的方式是使用 Response 对象。下述代码将 Blob 中的内容读取为文本:

var text = await (new Response(blob)).text();

通过使用 FileReader 的其它方法可以把 Blob 读取为字符串或者数据 URL

 二、php+js 实现切片上传

前端代码(upload.html):

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<body>
<input type="file" id="file" name="file">
<button>切片上传</button>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $("button").click(function(){
    	var cur_time = new Date(); //开始执行时间
    	var BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .
		var file = document.getElementById("file").files[0];
		var file_info = document.getElementById("file").value;
		var file_info_arr = file_info.split("\\");
		var file_name = file_info_arr[file_info_arr.length-1];

		var start = 0;
		var blobs = [];
		var file_num = Math.ceil(file.size / BYTES_PER_CHUNK);

		for (var i = 0; i < file_num; i++) {
		    var end = start + BYTES_PER_CHUNK;
		    blobs[i] = file.slice(start, end);
		    start = end;
	   }
		console.log(file_num)
		$.each(blobs, function(key, value){
			console.log(key);

			var fd = new FormData();
			fd.append('file_num', file_num); //切片总数
			fd.append('index', key+1); //切片份数
 			fd.append('file', value); //切片分成的blob对象
			fd.append('file_name', file_name); //文件名称
			$.ajax({
                type: 'POST',
				url: './upload.php',
				data: fd,
				processData: false,
				contentType: false,
                dataType: "json",   // 预期返回一个 json 类型数据
                success: function (data) {   // data是形参名,代表返回的数据
                    console.log(data.code);

					if(data.code == 1){
						var old_time = new Date();
						var difftime = (old_time - cur_time) / 1000; //秒
						alert('文件上传完成,使用时间 '+difftime+'s');
					}
                }
            });
		})
    })

    </script>

    <script type="text/javascript">
    	

    </script>

</html>

后端代码(upload.php):

<?php
header('content-type:text/html;charset=utf-8');
ini_set('memory_limit', -1);
ini_set('max_execution_time', 0);


$file = $_FILES['file'];
$data = $_POST;

$index = $data['index'];
$file_num = $data['file_num'];
$file_name = $data['file_name'];

$file_path = './file/';

//判断切片份数与切片总数相等后,将切片生成上传文件
if($index != $file_num){
	move_uploaded_file($file['tmp_name'], $file_path.$file_name.'_'.$index);
	echo json_encode(['code'=>2, 'msg'=>'切片上传成功']);
	exit;
}else{
	move_uploaded_file($file['tmp_name'], $file_path.$file_name.'_'.$index);

	$newData = '';
	for($i=1; $i<=$file_num; $i++){
		$newData .= file_get_contents($file_path.$file_name.'_'.$i);
		unlink($file_path.$file_name.'_'.$i);
	}
	file_put_contents($file_path.$file_name, $newData);
	echo json_encode(['code'=>1, 'msg'=>'切片全部上传完毕,并生成文件']);
	exit;
}

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript ,File 对象Blob 对象都用于处理二进制数据,但它们有一些区别。 File 对象是通过用户在文件选择框选择文件后创建的。它继承自 Blob 对象,因此具有 Blob 对象的所有属性和方法。File 对象通常用于处理用户上传的文件。它包含了文件的元数据,如文件名、文件类型和文件大小等。File 对象还提供了一些额外的属性和方法,用于获取文件的相关信息,如最后修改时间和文件的读取操作。 下面是一个创建 File 对象的示例: ```javascript <input type="file" id="file-input" /> <script> const fileInput = document.getElementById("file-input"); const file = fileInput.files[0]; console.log(file.name); // 获取文件名 console.log(file.type); // 获取文件类型 console.log(file.size); // 获取文件大小 </script> ``` Blob 对象用于存储二进制数据,可以包含各种类型的数据,如文本、图像、音频和视频等。Blob 对象通常用于处理非文件类型的二进制数据,例如从网络请求获取的数据或通过 JavaScript 生成的数据。Blob 对象提供了一些方法和属性,用于操作和换二进制数据,如获取数据大小、切割数据和换为其他格式(如 ArrayBuffer 或文本)等。 下面是一个创建 Blob 对象的示例: ```javascript const text = "Hello, world!"; const blob = new Blob([text], { type: "text/plain" }); console.log(blob.size); // 获取 Blob 对象的大小 console.log(blob.type); // 获取 Blob 对象的类型 ``` 总结来说,File 对象用于处理用户上传的文件,包含文件的元数据和读取操作,而 Blob 对象用于存储和操作二进制数据,可以包含各种类型的数据。它们在处理二进制数据时有不同的应用场景和用法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

m0_68949064

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值