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

随机推荐

redis异常-MISCONF Redis is configured to save RDB snapshots
在eclipse中用java代码通过jedis操作redis的时候,报这个错: redis.clients.jedis.exceptions.JedisDataException: MISCON ...
datetime模块常用函数
import datetime import time # 当前时间戳 now = time.time() print(now) # 时间戳转换成时间元祖 now = time.localtime(n ...
Ubuntu18.04 修改IP地址、查看网关、防火墙
1. Ubuntu18.04 修改IP地址修改 sudo vim /etc/netplan/50-cloud-init.yaml文件 # This file is generated from in ...
学习JDK1.8集合源码之--TreeMap
1. TreeMap简介 TreeMap继承自AbstractMap,实现了NavigableMap.Cloneable.java.io.Serializable接口.所以TreeMap也是一个key ...
java习题-集合框架-泛型
集合框架一去除List集合中的重复元素. 思路: 1,先创建一个临时容器.用于存储唯一性的元素.2,遍历原容器,将遍历到的元素到临时容器中去判断,是否存在.3,如果存在,不存储到临时容器,如果不存 ...
day38 04-Spring加载配置文件
Spring的工厂类ApplicationContext有两个子类:ClassPathXmlApplicationConext和FileSystemXmlApplication都可以用来加载配置文件. ...
xinetd服务管理
xinetd服务的管理文件都放在 /etc/xinetd.d目录内,我们可以编辑这个目录内的服务文件来开启和关闭服务.每个服务文件都有disable 这个行,如果把值改成yes就是禁用服务,如果是no ...
NLTK的探索
import nltk import random from nltk.corpus import movie_reviews documents = [(list(movie_reviews.wor ...
几道面试题-考察JS的运用
1.定义一个方法,传入一个string类型的参数,然后将string的每个字符间加个空格返回,比如: spacify('hello world') // => 'h e l l o w o r ...
来实现一个缩水版Vuex
对 Vuex 源码进行浓缩,DIY 一个小型 Vuex 功能如下通过 $store.commit 改变 $store.state 实现 strict model 源码约70行左右比较好理解,下面讲解 ...

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

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

随机推荐

热门专题