javaScript上传图片预览

土豆你个马铃鼠鼠

于 2018-04-17 14:58:24 发布

阅读量211

点赞数

分类专栏：功能代码文章标签：图片上传 javascript

本文链接：https://blog.youkuaiyun.com/Naru_Sasu/article/details/79974931

版权

功能代码专栏收录该内容

8 篇文章

订阅专栏

<div class="form-group">
    <label for="avatar">头像&nbsp;<font color="#808080">(图片尺寸为180*180,请按照此比例上传)</font></label>
    <input type="file" name="avatar" id="avatar" class="form-control" style="display: none"
           required="required" onchange="preview()">
    <button class="btn btn-default" onclick="putavatar()">点击上传头像</button>

    <script>
        function putavatar() {
            $('#avatar').trigger("click");
        }

        function preview() {
            var r = new FileReader();
            f = document.getElementById('avatar').files[0];
            r.readAsDataURL(f);
            r.onload = function (e) {
                $('#show').css('display','block');
                document.getElementById('show').src = this.result;

            };
        }
    </script>
</div>