input file上传图片本地预览

最新推荐文章于 2024-07-25 10:33:27 发布

小乔FEer

最新推荐文章于 2024-07-25 10:33:27 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/oucqsy/article/details/86592415

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 定义上传控件

<input id="inputImg" type="file" accept="image/png,image/jpeg,image/jpg" onchange="changeFile(event)">

2. 本地图片预览

function changeFile(event) {
    var input = event.target;
    var file = input.files[0];
    var fr = new FileReader();
    fr.onload = function(){
        if(file.type !== ("image/png" || "image/jpg" || "image/jpeg")){
            alert('图片格式错误');
            return false;
        }else if(file.size > 1024 * 1024){
            alert('图片大小不超过1M');
            return false;
        }else{
            var dataURL = fr.result; // 图片base64
            console.log(dataURL);
        }
    };
    fr.readAsDataURL(file);
  };