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

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

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]);
}