JS实现本地预览上传图片并获取宽高

别盯着我的名字看

发布于 2022-06-09 11:11:08

8K0

发布于 2022-06-09 11:11:08

文章被收录于专栏：前端专栏

我们在本地上传文件、图片是用file类型的表单，大多时候我们想让上传的图片先预览在我们本地，下面来看看代码吧。

HTML部分：

<input type="file" accept="image/jpg,image/jpeg,image/png" name="file" onchange="selectImg(this)">
<br>
<img id="showImg" src="" alt="" width="">

我们给上传表单的标签加一个 accept=”image/jpg,image/jpeg,image/png” ，这样会使打开文件的速度快一点。

JS部分：

function selectImg(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    //定以一个读取文件的对象
    var reader = new FileReader();
   
    reader.onload = function (evt) {
        //获取的是图片的base64代码
        var replaceSrc = evt.target.result;
        // 再将获取值赋给img标签
        $('#showImg').attr("src", replaceSrc);
    };
    reader.readAsDataURL(file.files[0]);
}

上面就实现了上传图片是本地预览图片了。

我们可以通过下面这句代码获得图片的其他信息↓

console.log(file.files);

可以从上面的截图看到，有图片的名字、大小、格式等。但是没有图片的宽度和高度，获取图片的宽度和高度需要用到Image() 对象。

function selectImg(file) {
    if (!file.files || !file.files[0]) {
        return;
    }
    //定以一个读取文件的对象
    var reader = new FileReader();

    reader.onload = function (evt) {
        //获取的是图片的base64代码
        var replaceSrc = evt.target.result;

        //定义一个Image对象
        var image = new Image();
        image.src = replaceSrc;
        console.log("图片宽度：" + image.width + " px");
        console.log("图片高度：" + image.height + " px");

        // 再将获取值赋给img标签
        $('#showImg').attr("src", replaceSrc);
    };
    reader.readAsDataURL(file.files[0]);
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-5-7，如有侵权请联系 cloudcommunity@tencent.com 删除

html