属性
说明
kind
一般为 string 或者 file
type
具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即 MIME-Type
方法
方法
参数
说明
getAsFile
空
如果 kind 是 file ，可以用该方法获取到文件
getAsString
function(str)
如果 kind 是 string ，可以用该方法获取到字符串str
在原型上还有一些其他方法，不过在处理剪切板操作的时候一般用不到了。
type 介绍
一般 types 中常见的值有 text/plain 、 text/html 、 Files 。
值
说明
text/plain
普通字符串
text/html
带有样式的html
Files
文件(例如剪切板中的数据)
有了上面这些方法，我们可以解决第二个问题即获取到剪切板上的数据。
document.addEventListener('paste', function (e) { console.info(e); var cbd = e.clipboardData; for(var i = 0; i < cbd.items.length; i++) { var item = cbd.items[i]; console.info(item); if(item.kind == "file"){ var blob = item.getAsFile(); if (blob.size === 0) { return; } console.info(blob); } } });
最后我们需要将获取到的数据渲染到网页上。
其实这个本质上就是一个类似于上传图片本地浏览的问题。我们可以直接通过HTML5的File接口将获取到的文件上传到服务器然后通过讲服务器返回的url地址来对图片进行渲染。也可以使用fileRender对象来进行图片本地浏览。
fileRender对象简介
从Blob中读取内容的唯一方法是使用 FileReader。
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
方法名
参数
描述
readAsBinaryString
file
将文件读取为二进制编码
readAsText
file,[encoding]
将文件读取为文本
readAsDataURL
file
将文件读取为DataURL
abort
(none)
终端读取操作
FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
事件
描述
onabort
中断
onerror
出错
onloadstart
开始
onprogress
正在读取
onload
成功读取
onloadend
读取完成，无论成功失败
通过上面的方法以及事件，我们可以发现，通过readAsDataURL方法及onload事件就可以拿到一个可本地浏览图片的DataURL。
最终代码如下：
document.addEventListener('paste', function (e) { console.info(e); var cbd = e.clipboardData; var fr = new FileReader(); var html = ''; for(var i = 0; i < cbd.items.length; i++) { var item = cbd.items[i]; console.info(item); if(item.kind == "file"){ var blob = item.getAsFile(); if (blob.size === 0) { return; } console.info(blob); fr.readAsDataURL(blob); fr.on<x>load=function(e){ var result=document.getElementById("result"); //显示文件 result.innerHTML='<img src="' + this.result +'" alt="" />'; } } } });
这样我们就可以监听到用户的粘贴操作，并且将用户粘贴的图片文件实时的渲染到网页之中了。
总结
以上是我对Blob对象的一些学习分享，希望在实际应用上能对大家有所帮助。也希望大家多多支持脚本之家。
您可能感兴趣的文章: