html文件上传前预览实现的两种方式

<script type="text/javascript" src="/js/jquery.min.js"></script>
<style>
    .imgbox {
        width: 15rem;
        height: 15rem;
        border: 1px red solid;
        margin: 2rem;
    }
    .imgbox img{
        width: 15rem;
        height: 15rem;
    }
</style>
{{!-- 主内容容器 --}}
<div class="main">
    <div id="newsList" class="">
        <div class="newsList-title">
            <h3 style="padding: 10px 0;">编辑资料</h3><i></i>
        </div>
        <div class="newsList-content">
            <div class="baseImg">
                <div class="imgbox">
                    <img src="/images/uploadpic.png" id="imgpicker">
                    <input type="file" name="basepic" accept="image/*" hidden>
                </div>
                <div class="imgbox">
                    <img src="/images/uploadpic.png" id="imgpicker1">
                    <input type="file" name="basepic1" accept="image/*" hidden>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
	<!-- 第一种方式 readAsDataURL -->
    $('#imgpicker').click(function(){
        $('input[name="basepic"]').click()
        $('input[name="basepic"]').change(function(e){
            console.log(e.target.files[0])
            var reader = new FileReader();
            reader.readAsDataURL(e.target.files[0])
            reader.onload = function(event) {
                // 文件里的文本会在这里被打印出来
                console.log(event.target.result)
                $('#imgpicker').attr('src',event.target.result)

            };
        })
    })
    <!-- 第二种方式createObjectURL -->
    $('#imgpicker1').click(function(){
        $('input[name="basepic1"]').click().change(function(e){
            console.log(e.target.files)
            var imgUrl = window.URL.createObjectURL(e.target.files[0]);
            console.log(imgUrl)
            $('#imgpicker1').attr('src',imgUrl)

        })
    })