参考一

来源：https://blog.51cto.com/u_16175464/9773051

用户点击按钮后，获取图片的base64

<input type="file" id="fileInput">

$('#fileInput').on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var imageData = e.target.result;    // 在这里你可以对图片进行其他操作，比如展示图片或上传图片到服务器
    };
    reader.readAsDataURL(file);});

显示图片

$('#fileInput').on('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var imageData = e.target.result; 
        $('#imageContainer').html('<img src="' + imageData + '">');
    }; 
    reader.readAsDataURL(file);});

<div id="imageContainer"></div>

参考二

来源：https://blog.csdn.net/weixin_44491927/article/details/98875829

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 获取本地图片的方法</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
    <input class="input-file" type="file">
    <div>
        <img src="" class="photo"/>
    </div>
<script>
    $(function(){
        $(".input-file").change(function(e) {
            //得到事件的目标节点，既input元素
            var imgBox = e.target;
            getImg(imgBox);
            $(".input-file").change = null;
        });
        function getImg(tag) {
            //第一张input选择的图片的一些参数
            var file = tag.files[0];
            var reader = new FileReader();
            //将文件以Data URL形式读入页面
            reader.readAsDataURL(file);
            reader.onload = function() {
                //result结果为 DataURL
                var imgSrc = this.result;
                //将图片显示出来
                $(".photo").attr("src", imgSrc);
            }
        }
    })
</script>
</body>
</html>

参考三

来源：https://www.jianshu.com/p/2bffcc047ad8

Jquery 获取本地图片

参考一

用户点击按钮后，获取图片的base64

显示图片

参考二

参考三