data url

data url的语法为：

data:[<mediatype>][;base64],<data>

说明：

（1）mediatype：设置内容类型，缺省为text/plain;charset=US-ASCII

（2）对于一些“小”的数据，可以使用data url在网页中直接嵌入，而不是从外部文件载入。

适用于html的img、iframe、link、script、css的background-image。

例如：

data:text/plain;charset=utf-8,你好，中文！

data:text/plain;charset=utf-8;base64,5L2g5aW977yM5Lit5paH77yB

data:text/html;charset=utf-8,

data:text/html;charset=utf-8;base64,

data:text/css;charset=utf-8,

data:text/css;charset=utf-8;base64,

data:text/javascript;charset=utf-8,

data:text/javascript;charset=utf-8;base64,

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHVK...

（3）动态生成data url（读取本地文件生成data url）

<div id="c"></div>

<form>

<input type="file" name="file1" id="file1">

</form>

<script>

let file1=document.getElementById("file1");

file1.addEventListener("change",function(){

        file2=file1.files[0]

        if(file2){

                let fr=new FileReader()

                fr.readAsDataURL(file2)

                fr.onload=function(){

                        let img=document.createElement("img")

                        img.setAttribute("src",this.result)  //还可以使用fr.result

                        document.getElementById("c").appendChild(img);

                }

        }

})

</script>

blob url

blob：不可变，原始数据的类文件对象。

blob url只能通过动态生成，形如blob:http://，适用于html的img、iframe、link、script、audio、video等。

创建blob对象的语法为：

var blob=new Blob(array,options);

说明：

（1）array为设置数据。

（2）options为设置参数，主要有：

type：设置内容类型，取值有text/plain、text/html、text/css、text/javascript等，缺省为""。

例如：

var blob=new Blob(["<script>alert('hello world!')</script>"],{"type":"text/html"});

创建blob url的语法为：

var url=URL.createObjectURL(blob对象|文件对象);

读取本地文件生成blob url

<div id="c"></div>

<form>

<input type="file" name="file1" id="file1">

</form>

<script>

let file1=document.getElementById("file1")

file1.addEventListener("change",function(){

        let file2=file1.files[0]

        if(file2){

                let img=document.createElement("img")

                img.setAttribute("src",URL.createObjectURL(file2))

                document.getElementById("c").appendChild(img)

        }

})

</script>

或

<div id="c"></div>

<form>

<input type="file" name="file1" id="file1">

</form>

<script>

let file1=document.getElementById("file1")

file1.addEventListener("change",function(){

        let file2=file1.files[0]

        if(file2){

                let fr=new FileReader()

                fr.readAsArrayBuffer(file2)

                fr.onload=function(){

                        let img=document.createElement("img")

                        img.setAttribute("src",URL.createObjectURL(new Blob([fr.result])))

                        document.getElementById("c").appendChild(img)

                }                

        }

})

</script>

读取远程文件生成blob url（fetch）

<div id="c"></div>

<script>

_window.onload=function(){

        fetch("./images/m11.png").then(response=>{

                if(response.ok){

                        response.blob().then(blob=>{

                                let img=document.createElement("img")

                                img.setAttribute("src",URL.createObjectURL(blob))

                                document.getElementById("c").appendChild(img)

                        })

                }

        })

}

</script>

读取远程文件生成blob url（ajax）

<div id="c"></div>

<script>

_window.onload=function(){

        let xhr=new XMLHttpRequest()

        xhr.responseType="blob"

        xhr.onreadystatechange=function(){

                if(xhr.readyState==4&&xhr.status==200){

                        let img=document.createElement("img")

                        img.src=URL.createObjectURL(xhr.response)

                        document.getElementById("c").appendChild(img)

                }

        }

        xhr.open("get","./images/m11.png",true)

        xhr.send()

}

</script>