添加上传目录

# 如果不添加上传目录，仍然可以上传成功，默认为project目录，如果models.py定义了upload_to="目录名称"，则会上传到"project/目录名称"这个目录，如果添加了如下配置，会上传到"project/media"目录或者project/media/upload_to="目录名称"/：

settings.py

MEDIA_URL = "/media/"

MEDIA_ROOT = os.path.join(BASE_DIR, "media")

后台注册页面

# ajax在提交图片到后台的时候，不能直接将图片作为字典传递，而是formData。

例：

var formData = new FormData;

formData.append("username", $("#id_username").val());

formData.append("password", $("#id_password").val());

formData.append("re_password", $("#id_re_password").val());

formData.append("email", $("#id_email").val());

// 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。

formData.append("avatar", $("#id_avatar")[0].files[0]);

formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>注册</title>

</head>

<body>

    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/css/backend.css">

    <div class="container register">

        <div class="row">

            <div class="col-md-6 col-md-offset-3">

{#                form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#}

                <form novalidate action="/register/" method="post" class="form-horizontal" enctype="multipart/form-data">

                    {% csrf_token %}

                    <div class="form-group">

                        <label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">

                            {{ form_obj.username.label }}

                        </label>

                        <div class="col-sm-8">

                            {{ form_obj.username }}

                            <span class="help-block">{{ form_obj.username.errors.0 }}</span>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">

                            {{ form_obj.password.label }}

                        </label>

                        <div class="col-sm-8">

                            {{ form_obj.password }}

                            <span class="help-block">{{ form_obj.password.errors.0 }}</span>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label">

                            {{ form_obj.re_password.label }}

                        </label>

                        <div class="col-sm-8">

                            {{ form_obj.re_password }}

                            <span class="help-block">{{ form_obj.re_password.errors.0 }}</span>

                        </div>

                    </div>

                    <div class="form-group">

                        <label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">

                            {{ form_obj.email.label }}

                        </label>

                        <div class="col-sm-8">

                            {{ form_obj.email }}

                            <span class="help-block">{{ form_obj.email.errors.0 }}</span>

                        </div>

                    </div>

                    <div class="form-group">

                        <label class="col-sm-2 control-label">

                            头像

                        </label>

                        <div class="col-sm-8">

                            <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png"></label>

                            <input type="file" id="id_avatar" style="display: none;" name="avatar" accept="image/*">

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-sm-offset-2 col-sm-8">

                            <button id="reg-submit" type="button" class="btn btn-success">注册</button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>

{#    <script src="/static/js/bootstrap.min.js"></script>#}

    <script src="/static/js/jquery-1.12.4.js"></script>

    <script>

        $("#id_avatar").change(function () {

            // 创建一个文件读取对象

            var fileReader = new FileReader;

            // 在更改前端图片之前，把文件内容读取完

            fileReader.readAsDataURL(this.files[0]); // 读取文件是需要时间的

            // 文件读取完后，重新加载到img当中

            fileReader.onload = function () {

                $("#avatar-img").attr("src", fileReader.result);

            }

        });

        $("#reg-submit").click(function () {

            var formData = new FormData;

            formData.append("username", $("#id_username").val());

            formData.append("password", $("#id_password").val());

            formData.append("re_password", $("#id_re_password").val());

            formData.append("email", $("#id_email").val());

            // 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。

            formData.append("avatar", $("#id_avatar")[0].files[0]);

            formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());

            /*

            console.log($("#id_avatar"));

            // 获取到了是一个jquery对象

            // jQuery.fn.init [input#id_avatar, context: document, selector: "#id_avatar"]

            console.log($("#id_avatar")[0]);

            // 获取到了input整个标签

            // <input type="file" id="id_avatar" style="display:none" name="avatar">

            console.log($("#id_avatar")[0].files);

            // 获取了input标签当中的type="file"类型中的内容

            //FileList {0: File, length: 1}

            //    0: File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …}

            //    length: 1

            //    __proto__: FileList

            console.log($("#id_avatar")[0].files[0]);

            // 获取到了整个上传的文件内容

            // File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …}

            */

            $.ajax({

                url: "/register/",

                type: "post",

                // 当需要传输图片的时候，需要将processData和contentType设置为false

                processData: false,

                contentType: false,

                data: formData,

                success:function (data) {

                    // 这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}

                    if (data.status){

                        // 有错误就展示错误

                        // console.log(data.msg);

                        // 将报错信息填写到页面上

                        $.each(data.msg, function (k,v) {

                            // console.log("id_"+k, v[0]);

                            // console.log($("#id_"+k));

                            $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");

                        })

                        //console.log(123)

                    }else {

                        // 没有错误就跳转到指定页面，这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"}

                        location.href = data.msg;

                    }

                }

            })

        });

        // 当input获取焦点的事件，移除报错的样式，并且晴空报错信息。

        $("form input").focus(function () {

            $(this).next().text("").parent().parent().removeClass("has-error");

        })

        $("#id_username").blur(function () {

            var username = $(this).val();

            $.ajax({

                url: "/check_username_exist/",

                type: "get",

                data: {"username": username},

                success: function (data) {

                    if (data.status){

                        //$("#id_username").next.text(data.msg).parentElement().parentElement().addClass("has-error");

                        // 上面为错误写法

                        $("#id_username").next().text(data.msg).parent().parent().addClass("has-error");

                    }

                }

            })

        })

    </script>

</body>

</html>

register.html

views.py

def register(request):

    if request.method == "POST":

        ret = {"status": 0, "msg": ""}

        form_obj = forms.RegForm(request.POST)

        # print(request.POST)

        if form_obj.is_valid():

            # 数据库中没有re_password字段，需要从字典中剔除re_password字段

            form_obj.cleaned_data.pop("re_password")

            # 接收从ajax发送过来的的图片数据

            avatar_img = request.FILES.get("avatar")

            print(avatar_img)

            models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img)

            ret["msg"] = "/reg/" # ajax在接收到ret对象后，会将这个数据取出，并且将这个数据通过使用location.href作为跳转目录

            return JsonResponse(ret)

        else:

            ret["status"] = 1

            ret["msg"] = form_obj.errors

            print(ret)

            return JsonResponse(ret)

    form_obj = forms.RegForm()

    return render(request, 'register.html', {"form_obj": form_obj})

def reg(request):

    return render(request, 'index.html') # 这里直接回复HttpResponse即可

最后，也是最重要，添加url路由，切记切记

from django.views.static import serve

from django.conf import settings

urlpatterns = [

    re_path(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),

]

django中博客后台将图片上传作为用户头像的更多相关文章

  1. JSP+Servlet中使用jspsmartupload.jar进行图片上传下载

    JSP+Servlet中使用cos.jar进行图片上传 upload.jsp <form action="FileServlet" method="post&quo ...

  2. JSP+Servlet中使用cos.jar进行图片上传（文件上传亦然）

    链接:JSP+Servlet中使用jspsmartupload.jar进行图片上传下载 关于cos.jar,百度百科只有这么几句话(http://baike.baidu.com/subview/406 ...

  3. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  4. Asp.net中FileUpload控件实现图片上传并带预览显示

    单一图片上传——“选择”+“上传”,.NET默认模式: 1.实现原理:     采用FileUpload控件默认的使用方式,先由“选择”按钮选择图片,然后单击“上传”按钮完成上传,并可在“上传”按钮的 ...

  5. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  6. 【原创】MVC项目中使用JQuery的upladify图片上传插件相关问题的解决方案

    一. 关于Uploadify Uploadify是一个jQuery插件,你可以很容易的为你的网站添加多个文件上传功能.有两个不同的版本(HTML5和Flash)允许你灵活选择为您的网站和回退方法正确实 ...

  7. django中通过文件和Ajax来上传文件

    一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...

  8. Django搭建博客后台

    转载自:http://sanwen8.cn/p/1cboypN.html 首先创建项目和blog应用: 在cmd命令行下,输入: django-admin.py startproject myblog ...

  9. hexo博客更新主题后上传Git操作

    克隆主题: git clone https://github.com/SuperKieran/TKL.git _config.yml文件中主题改为新增主题 # Extensions ## Plugin ...

随机推荐

  1. 基于LVS的负载均衡实现

    一 什么是负载均衡 负载均衡,英文名称为Load Balance,其意思就是分摊到多个操作单元上进行执行,例如Web服务器.FTP服务器.企业关键应用服务器和其它关键任务服务器等,从而共同完成工作任务 ...

  2. Libevent使用例子，从简单到复杂

    转载请注明出处:http://blog.csdn.net/luotuo44/article/details/39670221 本文从简单到复杂,展示如何使用libevent.网上的许多例子都是只有服务 ...

  3. 【基础巩固】文件流读写、大文件移动 FileStream StreamWriter File Path Directory/ ,m资料管理器（递归）

    C#获取文件名 扩展名 string fullPath = @"d:\test\default.avi"; string filename = Path.GetFileName(f ...

  4. jetbrains idea/webstorm等（注册，激活，破解码，一起支持正版，最新可用）（2017.3.16更新）【转】

    选择 License server (2017.3.16更新) http://idea.imsxm.com/ 详细请参考:  http://www.cnblogs.com/ys-wuhan/p/584 ...

  5. 解决Axis2在webservice中遇到特殊字符的无法传输的缺陷(<CDATA>数据类型)

    在使用Axis2进行soa webservice开发时,遇到类似以下的错误信息: com.ctc.wstx.sw.BaseStreamWriter.writeCharacters(BaseStream ...

  6. 字节流之文件输出流FileOutputStream

    文件拷贝:

  7. Java中long和Long的区别

    Java的数据类型分两种: 1.基本类型:long,int,byte,float,double,char,short,boolean 2. 对象类型(类): Long,Integer,Byte,Flo ...

  8. 4-3 线程安全性-原子性-synchronized

    原子性它提供了互斥访问,同一时刻只能有一个线程来对它进行操作.能保证同一时刻只有一个线程来对其进行操作的,除了Atomic包之外,还有锁.JDK提供锁主要分两种,synchronized是一个Java ...

  9. ZOJ3954 Seven-Segment Display

    题意: emmmm见原题吧 分析: 这也是当时省赛选拔的题,场上以为是大模拟,然后没敢写...补题发现是道水题··· 因为每一列的顺序不一定,但是行是一定的.所以只要把每一列组成一个数字,然后弄两个集 ...

  10. 值得一做》关于数学与递推 BZOJ1002 （BZOJ第一页计划）（normal+）

    什么都不说先甩题目 Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之 ...