wqewe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    .avatar_con {
        height: 100px;
        width: 100px;
        position: relative;

    }

    .avatar_con iframe {
        display: none
    }

    .avatar_con img {
        height: 100%;
        width: 100%;
        border: 0;
        overflow: hidden;
        max-height: 100px;
    }

    .avatar_con #previewImg {
        border-radius: 50%;
        border: 1px solid #dddddd;
        padding: 3px;
        height: 96px;
        width: 96px;
    }

    .avatar_con #avatarImg {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        position: absolute;
        z-index: 102;
    }
    .avatar-avatar_con .text {
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: center;
    }

</style>

<body>


<h1>jQuery Ajax上传文件</h1>
<div class="avatar_con">
        <label for="avatar">
        <img id="previewImg" src="/static/avatar/1.jpg">
        <div class="text">点击图片更换</div>
        </label>
        <input id="avatarImg" name="avatar" type="file"/>

</div>

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        bindChangeAvatar();
    });

    // ajax上传文件

    function bindChangeAvatar() {
        $('#avatarImg').change(function () {

            /*
                // 头像预览 方法1:
                // 获取用户选中的文件对象
                var file_obj = $(this)[0].files[0];
                // 获取文件对象的路径
                var reader = new FileReader();
                reader.readAsDataURL(file_obj);
                // 修改img的src属性 ，src=文件对象的路径
                reader.onload = function () {
                    $("#previewImg").attr("src", reader.result)
                };
             */

                var formdata=new FormData();
                formdata.append("avatar",$("#avatarImg")[0].files[0]);
                formdata.append("csrfmiddlewaretoken","{{ csrf_token }}");  //csrf


                $.ajax({
                    url:"",  //不填写就是当前 /upload/
                    type:"post",
                    contentType:false,  //
                    processData:false,  //
                    data:formdata,
                    success:function(arg){
                        arg = JSON.parse(arg);
                        if (arg.status) {
                            console.log(arg.data);
                            // 头像预览 方法2:
                            $('#previewImg').attr('src', '/' + arg.data);
                        }
                    }
                })

        })
    }

</script>



</body>
</html>
猜你喜欢
