js原生的头像修改

最新推荐文章于 2024-01-22 11:08:31 发布

天宇流沙

最新推荐文章于 2024-01-22 11:08:31 发布

阅读量597

点赞数 1

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41792374/article/details/125750059

版权

vue 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中读取input type=file元素选择的图片文件的两种常见方法：使用FileReader将图片转换为Base64编码，以及利用window.URL.createObjectURL创建Blob URL。这两种方法都允许在不上传服务器的情况下预览本地图片。

摘要由CSDN通过智能技术生成

js读取 input file 文件的两种方式

<div id="localImag">
    <img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
    <input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
</div>

1.使用FileReader读取图片（转化为base64）

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            var reader = new FileReader();
            reader.readAsDataURL(docObj.files[0]);//发起异步请求
            reader.onload = function(){
                //读取完成后，数据保存在对象的result属性中
                // console.log(this.result)
                imgObjPreview.src=this.result
            }
        }
}

2.使用 window.URL.createObjectURL 读取图片（转化为blod）(推荐)`

function setImagePreview() {
        var docObj = document.getElementById("docfile");
        var imgObjPreview = document.getElementById("preview");
        console.log(docObj.files[0])
        if (docObj.files && docObj.files[0]) {
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
}