20-1 django上传文件和项目里上传头像如何查看

一普通上传方式

1 views

 def upload(request):

     if request.method == "POST":

         # print(request.POST)

         # print(request.FILES)

         # 从上传的文件数据中拿到 avatar对应的文件对象

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

         # 在服务端新建一个和上传文件同名的新文件

         with open(file_obj.name, "wb") as f:

             # 从上传文件对象中一点一点读数据

             for i in file_obj:

                 # 写入服务端新建的文件

                 f.write(i)

         return HttpResponse("OK")

     return render(request, "upload.html")

2 html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" method="post" enctype="multipart/form-data">

    {% csrf_token %}

        上传头像：

        <input type="file" name="avatar">

    </p>

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

</form>

</body>

</html>

二 ajax上传方式

1 views.py

# ajax_upload上传

def ajax_upload(request):

    if request.method == "POST":

        # print(request.POST)

        # print(request.FILES)

        # 从上传的文件数据中拿到 avatar对应的文件对象

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

        # 在服务端新建一个和上传文件同名的新文件

        with open(file_obj.name, "wb") as f:

            # 从上传文件对象中一点一点读数据

            for i in file_obj:

                # 写入服务端新建的文件

                f.write(i)

        return HttpResponse("OK")

    return render(request, "ajax_upload.html")

2 html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ajax上传文件</title>

</head>

<body>

<input type="file" name="avatar" id="i1">

<input type="button" value="上传" id="b1">

{% csrf_token %}

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>

    $("#b1").click(function () {

        // 先生成一个FormData对象

        // 将要提交的数据 append 到FormData对象中

        var fd = new FormData();

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

        fd.append("avatar", $("#i1")[0].files[0]); // 获取文件名字

        $.ajax({

            url: "/ajax_upload/",

            type: "post",

            data: fd,

            contentType: false,

            processData: false,

            success: function (res) {

                console.log(res)

            }

        })

    });

</script>

</body>

</html>

三如何注册的时候上传头像并显示

1 urls配置：

from django.views.static import serve  # 用户上传文件用的模块
from django.conf import settings  # 同样是上传用的

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

2 setting.py

# 告诉djanjo项目用户上传的文件保存在哪个目录下

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

# 告诉用户用哪个前缀来访问刚才的定义的那个目录别名

MEDIA_URL = "/media/"

3 views配置：

 class RegisterView(views.View):

     '''

     如果是get请求，就返回注册页面，用的form写的注册页面，先导入刚才写的forms模块，然后调用RggisterForm

     如果是post请求（就是提交请求），form_obj获取到用户填的所有内容，然后去校验数据格式是否正确，如果没问题，就去

     数据库里面创建数据，创建之前，要先删除re_password这个字段，因为数据库里没有这个字段

     然后接受头像文件，需要用request.FILES，去获取

     最后去数据库保存，需要把你的普通数据和头像数据分开来存储。

     注册成功之后，就跳转到登录界面，否则就报报错信息返回到页面上面

     '''

     def get(self, request):

         form_obj = forms.RegisterForm()

         return render(request, "register.html", locals())

     def post(self, request):

         res = {"code": 0}

         form_obj = forms.RegisterForm(request.POST)

         if form_obj.is_valid():

             # 数据没问题，去数据库创建记录

             form_obj.cleaned_data.pop("re_password")

             # 头像数据，文件对象

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

             # 头像文件保存到数据库,如果你的models里面写的这个字段FileField，就会自动写在服务器上面

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

             res["url"] = "/login/"

         else:

             # 数据有问题

             res["code"] = 1

             res["error"] = form_obj.errors

         return JsonResponse(res)

4 html配置;

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>注册</title>

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

 </head>

 <body>

  <div class="container">

     <div class="row">

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

             <form class="register-form">

                 {% csrf_token %}

                 {% for field in form_obj %}

                 <div class="form-group">

                         <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                          {{ field }}

                          <span class="help-block"></span>

                 </div>

                 {% endfor %}

                 <div class="form-group">

                     <label for="id_avatar">头像

                         <img src="/static/images/default.png" id="avatar-img" style="width: 60px">

                     </label>

                     <input type="file" id="id_avatar" accept="image/*" class="form-control" style="display: none">

                 </div>

                 <div style="text-align: center">

                      <button style="width: 100px" type="button" class="btn btn-success" id="submit-btn">提交</button>

                 </div>

             </form>

         </div>

     </div>

 </div>

  <script src="/static/plugins/jquery-3.3.1.min.js"></script>

  <script src="/static/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>

  <script src="/static/js/register.js"></script>

 </body>

 </html>

js配置：

 // 设置错误提示

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

     // 因为注册功能有头像文件 数据，所以要用FormData对象提交数据

     var fd = new FormData();

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

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

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

     fd.append("phone", $("#id_phone").val());

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

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

     // avatar头像

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

     $.ajax({

         url: "/register/",

         type: "post",

         data: fd,

         contentType: false,

         processData: false,

         success: function (res) {

             if (res.code === 1) {

                 $.each(res.error, function (k, v) {

                     console.log(k, v[0]);

                     {

                         // #先找到input标签，下面的那个标签，然后设置错误信息，再找到显示错误标签的父标签，设置has - error

                     }

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

                 })

             } else {

                 location.href = res.url

             }

         }

     })

 });

 // 给input标签绑定获取焦点就删除错误提示的动作

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

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

 });

 //头像预览功能

 //值发生变化了

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

     // 取到用户选中的头像文件

     var fileObj = this.files[0]; //路径

     // 新建一个FileReader对象，从本地磁盘加载文件数据

     var fr = new FileReader();

     fr.readAsDataURL(fileObj);

     // 读取文件是需要时间的

     fr.onload = function () {

         // 找到头像预览的img标签，把它的src属性设置成我读取的用户选中的图片

         $("#avatar-img").attr("src", fr.result)  //结果

     }

 });

index.html首页导航条图像显示

 <li><img style="height: 40px;width: 40px;border-radius: 50%" src="/media/{{ request.user.avatar }}"></li>

20-1 django上传文件和项目里上传头像如何查看的更多相关文章

django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
jmert中如何测试上传文件接口（测试上传excel文件）
第一次用jmeter这个工具测试上传接口,以前没做过这一块,导致走了很多弯路.特地把经验谢谢,怕自己以后忘记... 一,jmeter如何上传文件 jmeter 的 http requests post ...
GitHub上传文件或项目的教程
既然是往GitHub上传文件,那GitHub账号必须得有,这时候就会有同学问:妖怪吧,我没有GitHub账号怎么办? 别急别急,打开GitHub网站https://github.com/,然后注册就O ...
Spring Boot 上传文件获取项目根路径物理地址 resttemplate上传文件
springboot部署之后无法获取项目目录的问题: 之前看到网上有提问在开发一个springboot的项目时,在项目部署的时候遇到一个问题:就是我将项目导出为jar包,然后用java -jar 运行 ...
django中通过文件和Ajax来上传文件
一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype=" ...
element ui实现手动上传文件，且只能上传单个文件，并能覆盖上传。
element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...
js上传文件过大导致上传失败原因以及解决办法
背景:项目需要用到上传视频功能,由于视频有知识产权,要求必须上传到自己的服务器上不允许用第三方视频网站接口上传,于是一开始开始用的是input type=file去上传,小的视频上传没有问题,上传将近 ...
.net 实现上传文件分割，断点续传上传文件
一介绍断点续传搜索大部分都是下载的断点续传,涉及到HTTP协议1.1的Range和Content-Range头. 来个简单的介绍所谓断点续传,也就是要从文件已经下载的地方开始继续下载.在以前版本 ...
iOS上传文件，有关http上传协议-RFC1867
以上是抓包HTML input file标签上传的内容只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...

随机推荐

傻瓜式教程--实现登录页面的验证码以及验证(VUE)
做成之后就是这个样子接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas ...
从页面获取form表单提交的数据
1 使用HttpServletRequest,方便灵活页面代码,使用action提交一个表单,里边有球的id,球的主人,球的颜色,所在省份,区域 <form action="ball ...
maven安装教程（Idea）
下载网址:https://maven.apache.or 点击Download 根据需要下载需要的版本 1.解压下载好的安装包放入新创建的maven文件夹中 2.在系统变量中添加环境变量(建议改成M2 ...
各NoSQL数据库管理系统与模型比较
提供:ZStack云计算内容简介 NoSQL数据库的存在意义在于提供传统关系数据库管理系统所不具备的特定功能.无论是负责承载简单的键-值对存储以实现短期缓存,抑或是处理传统数据库及结构化查询语言(简 ...
2019.8.1 NOIP模拟测试11 反思总结
延迟了一天来补一个反思总结急匆匆赶回来考试,我们这边大家的状态都稍微有一点差,不过最后的成绩总体来看好像还不错XD 其实这次拿分的大都是暴力[?],除了某些专注于某道题的人以及远程爆踩我们的某学车神 ...
JQMObile 优势
1.跨平台目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry, ...
洛谷P1569属牛的抗议超级强力无敌弱化版
P1569 [USACO11FEB]属牛的抗议Generic Cow Prote- 题目描述约翰家的N头奶牛聚集在一起,排成一列,正在进行一项抗议活动.第i头奶牛的理智度为Ai,Ai可能是负数.约 ...
openpyxl 模块的使用
参考博客:https://www.cnblogs.com/anpengapple/p/6399304.html?utm_source=itdadao&utm_medium=referral 在 ...
iPhone使用CoreTelephony获得SIM卡网络运营商资讯和通话资料
注意要加头文件目录 /System/Library/Frameworks/CoreTelephony.framework/Headers 到 build 设置 Header Search Paths, ...
从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到点子上了,Gi ...

20-1 django上传文件和项目里上传头像如何查看

20-1 django上传文件和项目里上传头像如何查看的更多相关文章

随机推荐

热门专题