Blob对象判断是不是图片类型以及Blob数据下载

<input type="file" id='file' accept="image/x-png" />

accept表示只接受png格式图片

H5中新增了Blob对象，代表原始二进制数据，file对象也继承了Blob对象。

Blob对象有2个属性，size是Blob对象长度,type是mime类型，如果未知类型返回空字符串

图像文件中Blob对象的type类型都是以image/开头的。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="file" id='file' multiple="multiple" /><input type="button" value="显示" οnclick="S();" /><br /> 文件字节长度:<span id="size"></span><br /> 类型:<span id="type"></span></body></html><script>var S = function() {var file1 = document.getElementById("file").files[0];if(!/image\/\w+/.test(file1.type))alert('不是图像');else {document.getElementById("size").innerText = file1.size;document.getElementById("type").innerHTML =file1.type;}}
</script>

blob对象下载数据：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><textarea id="text" placeholder="输入文字"></textarea><button id="btndownload" οnclick="Blob_test()">创建及下载二进制文件</button><output id="result"></output></body></html><script>function Blob_test(){var text = document.getElementById("text").value;var blob;var result = document.getElementById("result");if(!window.Blob)result.innerHTML = '不支持';elseblob = new Blob([text]);if(window.URL){result.innerHTML = '<a download href="' + window.URL.createObjectURL(blob) + '" target="_blank">文件下载</a>';}}
</script>

Blob对象判断是不是图片类型以及Blob数据下载相关推荐

python 获取二进制图片数据及判断得到图片类型
获取二进制图片信息 img_url = 'http://xxxxxxxxxxxxxxxxxxxxxxx' data = requests.get( img_url , headers=headers) ...
mysql blob longblob_MYSQL教程Mysql LONGBLOB 类型存储二进制数据 (修改+调试+整理)
<MYSQL教程Mysql LONGBLOB 类型存储二进制数据 (修改+调试+整理)>要点: 本文介绍了MYSQL教程Mysql LONGBLOB 类型存储二进制数据 (修改+调试+整理 ...
js二进制流转Blob对象。Blob对象再转File对象
JavaScript 二进制转文件使用js将blob对象转file对象前端处理后端返回的二进制流文件 js中Blob对象一般用法 js中关于Blob对象的介绍与使用上传的文件对象完整代码实例 ...
vue验证手机号、密码验证码、时间、机型、图片类型等
新建util.js : // 验证手机号 const testPhone = (resPhone) => {console.log(resPhone, "resPhone") ...
Spring 让 LOB 数据操作变得简单易行，LOB 代表大对象数据，包括 BLOB 和 CLOB 两种类型
http://www.ibm.com/developerworks/cn/java/j-lo-spring-lob/index.html 本文讲解了在 Spring 中处理 LOB 数据的原理和方法, ...
[JS进阶] JS 之Blob 对象类型
什么是Blob? Blob 是什么? 这里说的是一种Javascript的对象类型. oracle 中也有类似的栏位类型. 在 [JS进阶] HTML5 之文件操作(file) 这一篇中用到了File ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
blob html 预览_本地图片预览+blob使用
说明:做要用到file标签和 html5 Blob对象方法1:使用file标签请选择一个文件: // 将文件以Data URL形式进行读入页面 function readAsDataURL(){ ...
js中关于Blob对象的介绍与使用
js中关于Blob对象的介绍与使用 blob对象介绍一个 Blob对象表示一个不可变的, 原始数据的类似文件对象.Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js ...
HTML5 file对象和blob对象的互相转换
使用FileReader 对象转换:File => DataURL 该对象用于读取文件(读取单个对象文件,所以,不能直接读取 Filelist 对象文件集合),即把文件内容读入内存.它接收 Fi ...

Blob对象判断是不是图片类型以及Blob数据下载

Blob对象判断是不是图片类型以及Blob数据下载相关推荐

最新文章

热门文章