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里面带参数,参数的格式,根据 ...

随机推荐

本地项目上传git@osc
本地项目使用eclipse的git插件上传到开元中国社区的代码托管平台 1.在托管平台新建项目 2.使用eclipse的git repositories ,在URI中输入新建项目的https路径; 验 ...
Struts Tiles框架使用（转）
原文:Struts Tiles框架使用 Tiles框架 ++YONG原创,转载请声明 Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离.它用模板定义网页布局,每个页面模板都 ...
笔记本最小安装centos7 连接WiFi的方法
1.首先下载iw工具. yum -y install iw 2.获取无线网卡的名称执行iw dev,假设获得名称为 wlp3s0(示例) 3.激活无线网络接口执行ip link set wlp3s ...
Git--版本管理的使用及理解
如果多人合作时,git也是需要中间交换服务器来解决冲突合并,这不还是集中式版本控制吗? 而svn不是也可以将所有源码下载到本机,然后在本机修改,保存在本机上,为什么这个不能说是分布式,提交的时候不也是 ...
step（）动画
<style type="text/css"> .hi { width: 50px; height: 72px; background-image: url(" ...
LINNX联网配置文件
联网 /etc/gated.conf gated 的配置.只能被 gated 守护进程所使用. /etc/gated.version 包含 gated 守护进程的版本号. /etc/gateway 由 ...
[翻译] MaxMind DB 文件格式规范
MaxMind DB 文件格式规范来源:http://maxmind.github.io/MaxMind-DB/翻译:御风(TX:965551582)2017-03-23 -------------- ...
CF 848C
听说,一个好的oier是题目喂出来的. 题目给定长度为n的数组, 定义数字X在[l,r]内的值为数字X在[l,r]内最后一次出现位置的下标减去第一次出现位置的下标给定m次询问, 每次询问有三个整数 ...
模拟21 题解（waiting）
留坑待填效率!!! 题还没改Oh,NO!!!
陈云川的OPENLDAP系列
前言本来,我应该准备一篇精彩的演说辞,从LDAP应用的方方面面讲起,细数LDAP在各种场合应用的成功案例,大肆渲染LDAP应用的辉煌前景,指出有多少机构和组织的关键业务是建立在LDAP的基础上的 ...

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

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

随机推荐

热门专题