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

来源：互联网发布：java防止表单重复提交编辑：程序博客网时间：2024/06/01 09:16

<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="显示" onclick="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" onclick="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>

0 0