利用form&ajax头像上传及修改

最新推荐文章于 2022-08-03 10:54:15 发布

骑台风走

最新推荐文章于 2022-08-03 10:54:15 发布

阅读量3.7k

点赞数 1

分类专栏： python_web杂谈文章标签： ajax 前端 javascript django python

本文链接：https://blog.csdn.net/qq_52385631/article/details/122865775

版权

python_web杂谈专栏收录该内容

44 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Django框架下实现前端表单及Ajax方式的头像上传和修改功能，包括前端HTML、CSS、JavaScript的实现，后端Django模型、视图的配置，以及图片的存储位置和URL处理。通过实例代码展示了文件读取、预览、上传的完整流程。

摘要由CSDN通过智能技术生成

0. 如果您对数据传输过程中的编码格式，不是很清楚，这边来

前后端数据传输编码格式https://blog.csdn.net/qq_52385631/article/details/122821865?spm=1001.2014.3001.5501

一. 前提准备

a. python3x

b. django2.x

c. 喜欢的ide

二：利用form表单头像上传&修改

1. 头像上传

(1). 前端准备

a. 头像样式(圆形头像)

<style>
        .round_icon {
            width: 34px;
            height: 34px;
            display: flex;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
    </style>

b. 前端整体的hrml(头像预览，需要借助一个文件阅读器对象实现)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    .round_icon {
        width: 66px;
        height: 66px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
</style>
<body>
<!-- 头像提交 -->
<form id="myForm" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--提交的头像展示-->
            <img src="" class="round_icon" alt="头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="submit" value="提交">
</form>

<script>
    // 头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象  $(this)[0].files[0]---jq里面无法对文件进行处理，需要转换成原生js
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕  myFileObj.result---图片路径
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>
</body>
</html>

(2). 后端

a. django图片上传功能配置

django图片上传https://blog.csdn.net/qq_52385631/article/details/122762006?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164448719716780271572941%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164448719716780271572941&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122762006.nonecase&utm_term=%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0&spm=1018.2226.3001.4450b. model

from django.db import models


# Create your models here.


class Userinfo(models.Model):
    username = models.CharField(verbose_name='用户名', max_length=32)
    password = models.CharField(verbose_name='密码', max_length=225)
    icon = models.ImageField(verbose_name='头像', upload_to='icon', blank=True, null=True)

c. url

    path('format_text/', views.coding_format_view, name='orm_text'),

d. view

from django.shortcuts import render, HttpResponse

from . import models


# Create your views here.


def coding_format_view(request):
    user_obj = models.Userinfo.objects.create(
        username='dbj',
        password='123',
        icon=request.FILES.get('icon')
    )

    return render(request, 'coding_format_view.html')

e. 图片上传的位置

2. 头像修改

(1). 前端准备

a. html页面(为了看到效果，我把我们刚才上传的图片，给展示在这个页面上)

<!-- 头像展示 -->
<div>
    <img src="{{ url }}" class="round_icon" alt="">
</div>

b. 完整的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    .round_icon {
        width: 66px;
        height: 66px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
</style>
<body>
<!-- 头像展示 -->
<div>
    <img src="{{ url }}" class="round_icon" alt="">
</div>
<!-- 头像修改 -->
<form id="myForm" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--提交的头像展示-->
            <img src="" class="round_icon" alt="修改头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="submit" value="提交">
</form>

<script>
    // 头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象  $(this)[0].files[0]---jq里面无法对文件进行处理，需要转换成原生js
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕  myFileObj.result---图片路径
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>
</body>
</html>

(2). 后端

a. url

    path('icon_change/', views.icon_change_view, name='icon_change'),

b. view

def icon_change_view(request):
    user_obj = models.Userinfo.objects.get(id=2)
    if request.method == 'GET':
        # 获取刚才创建的对象，我之前创建过一个用户，所以id=2
        # 我们获取到的图片看着像路径，实际上是一个对象
        # print(user_obj.icon.url)  /media/icon/1755041963.jpeg.jpeg
        img_url = user_obj.icon.url
        return render(request, 'change_icon.html', context={'status': 200, 'url': img_url})
    # 获取新的图片对象
    new_img = request.FILES.get('icon')
    if new_img:
        user_obj.icon = new_img
        user_obj.save()
    img_url = user_obj.icon.url
    return render(request, 'change_icon.html', context={'status': 200, 'url': img_url})

c. 效果

三：利用ajax表单头像上传&修改

1. 图片配置以及表模型同上

2. 头像上传

(1). 前端准备

a. html(ajax 提交文件需要借助FormData)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    .round_icon {
        width: 66px;
        height: 66px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
</style>
<body>
<form id="myForm" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--提交的头像展示-->
            <img src="" class="round_icon" alt="头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="button" id="id_button" value="提交">
</form>

<script>
    // 头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象  $(this)[0].files[0]---jq里面无法对文件进行处理，需要转换成原生js
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕  myFileObj.result---图片路径
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>
<script>
    // Ajax提交
    $('#id_button').click(function () {
        // ajax 提交文件需要借助FormData
        var myFormData = new FormData();
        // 普通键
        $.each($('#myForm').serializeArray(), function (index, obj) {
            myFormData.append(obj.name, obj.value)
        })
        myFormData.append('icon', $('#id_icon')[0].files[0]);  // 获取input框内部用户上传的文件对象

        $.ajax({
            url: "{% url 'ajax_post_files' %}",
            type: "post",
            data: myFormData,
            dataType: "JSON",  // 对于返回来的数据，进行反序列化，ajax本身自带反序列化，但是加上他保险
            processData: false,  // 让浏览器不要对你的数据进行任何的操作
            contentType: false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
            success: function (ret) {
                if (ret.status) {
                    console.log($('#myForm').serializeArray()) // [{}]

                    console.log($('#myForm').serialize()) // urlencode 类似于字符传 被解析到request.POST字典中


                }
            }
        })
    })
</script>
</body>
</html>

(2). 后端

a. url

    path('ajax_post_files/', views.ajax_post_files_view, name='ajax_post_files'),

b. view

from django.http import JsonResponse


def ajax_post_files_view(request):
    if request.method == 'GET':
        return render(request, 'ajax_post.html')
    models.Userinfo.objects.create(
        username='dbj',
        password='123',
        icon=request.FILES.get('icon')
    )
    return JsonResponse({'status': 200})

3. 头像修改

(1). 前端

a. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
    .round_icon {
        width: 66px;
        height: 66px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
</style>
<body>
<!-- 头像展示 -->
<div>
    <img src="{{ url }}" class="round_icon" alt="" id="old_img">
</div>
<form id="myForm" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    <div>
        <label for="id_icon">
            <!--提交的头像展示-->
            <img src="" class="round_icon" alt="头像" id="myImg">
        </label>
    </div>
    <input type="file" id="id_icon" name="icon" style="display: none">

    <input type="button" id="id_button" value="提交">
</form>

<script>
    // 头像预览
    $('#id_icon').change(function () {
        // 1.文件阅读器对象
        let myFileObj = new FileReader();
        // 2.获取用户上传的文件对象  $(this)[0].files[0]---jq里面无法对文件进行处理，需要转换成原生js
        let fileObi = $(this)[0].files[0];
        // 3.将文件对象交给阅读器对象
        myFileObj.readAsDataURL(fileObi) // 异步操作， IO操作
        // 4.利用文件阅读器将文件展示到前端页面，修改是src属性
        // 5. 等待文件阅读器加载完毕  myFileObj.result---图片路径
        myFileObj.onload = function () {
            $('#myImg').attr('src', myFileObj.result)
        }
    })

</script>
<script>
    // Ajax提交
    $('#id_button').click(function () {
        // ajax 提交文件需要借助FormData
        var myFormData = new FormData();
        // 普通键
        $.each($('#myForm').serializeArray(), function (index, obj) {
            myFormData.append(obj.name, obj.value)
        })
        myFormData.append('icon', $('#id_icon')[0].files[0]);  // 获取input框内部用户上传的文件对象

        $.ajax({
            url: "{% url 'ajax_change_files' %}",
            type: "post",
            data: myFormData,
            dataType: "JSON",  // 对于返回来的数据，进行反序列化，ajax本身自带反序列化，但是加上他保险
            processData: false,  // 让浏览器不要对你的数据进行任何的操作
            contentType: false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
            success: function (ret) {
                if (ret.status) {
                    // 把url放到img的src里面
                    $('#old_img').attr('src', ret.url)
                }
            }
        })
    })
</script>
</body>
</html>

(2). 后端

a. url

    path('ajax_change_files/', views.ajax_change_icon_view, name='ajax_change_files'),

b. view

def ajax_change_icon_view(request):
    user_obj = models.Userinfo.objects.get(id=2)
    if request.method == 'GET':
        # 获取刚才创建的对象，我之前创建过一个用户，所以id=2
        # 我们获取到的图片看着像路径，实际上是一个对象
        # print(user_obj.icon.url)  /media/icon/1755041963.jpeg.jpeg
        img_url = user_obj.icon.url
        print(img_url)
        return render(request, 'ajax_change_icon.html', context={'status': 200, 'url': img_url})
    # 获取新的图片对象
    new_img = request.FILES.get('icon')
    if new_img:
        user_obj.icon = new_img
        user_obj.save()
    img_url = user_obj.icon.url
    return JsonResponse({'status': 200, 'url': img_url})

c. 效果