js 实现图片上传之前的预览

最新推荐文章于 2024-04-18 00:52:22 发布

seven_an

最新推荐文章于 2024-04-18 00:52:22 发布

阅读量606

点赞数

分类专栏： javascript html5 文章标签：图片二进制 javascript FileReader H5

本文链接：https://blog.csdn.net/seven_an/article/details/78306067

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

获取图片的基本方式：

-方法一：
用window.URL.createObjectURL

-方法二：
h5的新方法：
var reader= new FileReader()
读取文件，有四种格式方法：
1.readAsBinaryString读取为二进制码
2.readAsDataURL读取为 DataURL
3.readAsText读取为文本
4.readAsArrayBuffer

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<input type="file" onchange="upload(event)" filetype="image/*"/>
<img src="" alt="" id="preview">
<script>
    function upload(event){
        var inputs = event.target.files[0];
        //方法一：
        var img=window.URL.createObjectURL(inputs)
        document.getElementById("preview").setAttribute("src",img)

        //方法二：
        var reader = new FileReader()
        reader.readAsDataURL(inputs)
        reader.onload = function(){ //当读取操作成功时调用
            document.getElementById("preview").setAttribute("src",this.result)
            console.log(new Blob([this.result]))
        }
    }; 
</script>
</body>
</html>

seven_an

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现图片上传之前的预览

获取图片的基本方式：-方法一：用window.URL.createObjectURL-方法二： h5的新方法： var reader= new FileReader() 读取文件，有四种格式方法： 1.readAsBinaryString读取为二进制码 2.readAsDataURL读取为 DataURL 3.readAsText读取为文本 4.readAsArrayBuf
复制链接

扫一扫