js選擇上傳圖檔後回顯

<form action="/wxhy/Membercoupon/upload" method="post" enctype="multipart/form-data">
    <input type="hidden" id="vipcode" name="vipcode" th:fieid="${vipcode}" th:value="${vipcode}">
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title" style="margin-left:20px;">上傳頭像</p>
        </div>
        <img src="" id="show" width="100" height="100" style="display:none;">
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files"></ul>
            <div class="weui-uploader__input-box">
                <input class="weui-uploader__input" type="file" id="file" name="file" accept="image/*" onchange="c()">
            </div>
        </div>
        <input type="submit" class="ui-btn ui-btn-primary" style="margin-left:5px;margin-top: 10px" value="立刻上傳">
    </div>
</form>
</div>

<script>
    function c () {
        var r= new FileReader();
        f=document.getElementById('file').files[0];
        r.readAsDataURL(f);
        r.onload=function (e) {
            document.getElementById('show').src=this.result;
        };
            $("#show").show();
    }
</script>