js上传图片的三种方式可预览

最新推荐文章于 2023-10-26 09:05:13 发布

Lenny-zlp

最新推荐文章于 2023-10-26 09:05:13 发布

阅读量184

点赞数

分类专栏： js 学习总结

本文链接：https://blog.csdn.net/weixin_45843013/article/details/113601764

版权

学习总结同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
</head>

<body>
    <div style="margin-left: 30px; margin-top: 30px">
        <div style="position: absolute; top: 85px; left: 300px;">
            <input id="avatarSlect" type="file"
                style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;">
            <img id="avatarPreview" src="/static/images/sample.png" title="点击更换图片"
                style="position: absolute; z-index: 9; float: left; width: 100px; height: 100px">
        </div>
    </div>
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        // bindAvatar1()
        // bindAvatar2()
        bindAvatar3()
    });
    /*Ajax上传至后台并返回图片的url*/
    function bindAvatar1() {
        $("#avatarSlect").change(function () {
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            var formData = new FormData();
            formData.append("csrfmiddlewaretoken", csrf);
            formData.append('avatar', $("#avatarSlect")[0].files[0]);    /*获取上传的图片对象*/
            $.ajax({
                url: '/upload_avatar/',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (args) {
                    console.log(args);    /*服务器端的图片地址*/
                    $("#avatarPreview").attr('src', '/' + args);    /*预览图片*/
                    $("#avatar").val('/' + args);    /*将服务端的图片url赋值给form表单的隐藏input标签*/
                }
            })
        })
    }
    /*window.FileReader本地预览*/
    function bindAvatar2() {
        console.log(2);
        $("#avatarSlect").change(function () {
            var obj = $("#avatarSlect")[0].files[0];
            var fr = new FileReader();
            fr.onload = function () {
                $("#avatarPreview").attr('src', this.result);
                console.log(this.result);
                $("#avatar").val(this.result);
            };
            fr.readAsDataURL(obj);
        })
    }
    /*window.URL.createObjectURL本地预览*/
    function bindAvatar3() {
        console.log(3);
        $("#avatarSlect").change(function () {
            var obj = $("#avatarSlect")[0].files[0];
            var wuc = window.URL.createObjectURL(obj);
            $("#avatarPreview").attr('src', wuc);
            $("#avatar").val(wuc);
            })
        }
</script>

</html>

Lenny-zlp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js上传图片的三种方式可预览

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上传图片</title></head><body> <div style="margin-left: 30px; margin-top: 30px"> <div style="position: absolut
复制链接

扫一扫