Day-1-Blob构造对象

最新推荐文章于 2024-01-12 11:58:01 发布

铭心NTeen

最新推荐文章于 2024-01-12 11:58:01 发布

阅读量217

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_25238675/article/details/103154022

版权

HTML5 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Blob构造对象

base64格式的图片太大可以使用Blob构造函数把图片文件对象转换成一个blob对象

var   blob  =   new   Blob([file])		        //生成blob对象	
var   url  =   URL.createObjectURL(blob)		//生成URL地址

实例代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="file" multiple>
<script>
    
    var input = document.querySelector('input')
    //当文件上传时 会触发回调函数
    input.onchange = function(){
        console.log('文件上传了');

        var file = this.files[0]

        /*
        *  通过Blob函数把图片对象file  解析成blob
        * */
        var blob = new Blob([file])
        /*
        *   把生成的blob对象传入到  createObjectURL函数中 生成一个url
        * */
        var url = URL.createObjectURL(blob)

        var oImg = new Image();
        oImg.src = url
        oImg.width = 200;
        oImg.onload = function () {
            document.body.appendChild(this)
        }


    }


</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

铭心NTeen

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day-1-Blob构造对象

Blob构造对象base64格式的图片太大可以使用Blob构造函数把图片文件对象转换成一个blob对象var blob = new Blob([file]) //生成blob对象 var url = URL.createObjectURL(blob) //生成URL地址实例代码：<!DOCTYPE html>&l...
复制链接

扫一扫