Django - 文件上传、Django组件 - 分页器（paginator）
一、文件上传准备知识 - Content-Type
1、请求头 - Content-Type
Content-Type指的是请求体的编码类型，常见的类型共有3种：
1）application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么默认就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：
POST http://www.example.com HTTP/1.1 Content-Type: application/x-www-form-urlencoded;charset=utf-8 user=yuan&age=22
示例：ajax以application/x-www-form-urlencoded方式提交数据（实现一个简单计算器）
模板部分：
<div> <input type="text" id="num1"> + <input type="text" id="num2"> = <input type="text" id="res"> <input type="button" class="calbtn" value="提交"> </div> <script> // ajax默认发送发送格式也是urlencoded $(".calbtn").click(function () { var num1 = $("#num1").val() var num2 = $("#num2").val() $.ajax({ url:"/cal/", type:"post", data:{ num1: num1, num2: num2, csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, success:function (response) { console.log(response); $("#res").val(response) } }) }); </script>
视图部分：
def cal(request): # Django将接收到的urlencoded格式数据拆包成字典形式放到request.POST中 num1 = request.POST.get("num1") num2 = request.POST.get("num2") sum = int(num1) + int(num2) return HttpResponse(str(sum))
2）multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。直接来看一个请求示例：
POST http://www.example.com HTTP/1.1 Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="user" yuan ------WebKitFormBoundaryrGKCBY7qhFd3TrwA Content-Disposition: form-data; name="file"; filename="chrome.png" Content-Type: image/png PNG ... content of chrome.png ... ------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867（http://www.ietf.org/rfc/rfc1867.txt） 查看。
这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。
上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。
随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。
3）application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify()，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得几年前做一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。
示例：ajax发送json格式数据（实现一个简单的计算器）
模板部分：
<script> $(".calbtn").click(function () { var num1 = $("#num1").val() var num2 = $("#num2").val() $.ajax({ url:"/cal/", type:"post", contentType:"json", // 需要客户端告诉服务端发送的是json格式 data:JSON.stringify({ num1: num1, num2: num2, // csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() // 这时csrfmiddlewaretoken不能再这样发，下面说明解决办法 }), success:function (response) { console.log(response); $("#res").val(response) } }) }); </script>
视图部分：
def cal(request): print(request.body) # b'{"num1":"11","num2":"22"}' data_json = request.body.decode("utf8") import json data_dict = json.loads(data_json) num1 = data_dict.get("num1") num2 = data_dict.get("num2") sum = int(num1) + int(num2) return HttpResponse(str(sum))
总结：form表单请求不能提交json格式数据，ajax请求可以支持提交以上三种数据格式，但用于json最多。
二、文件上传示例
1、基于form表单的文件上传
模板部分：
<form action="" method="post" enctype="multipart/form-data"> 用户名<input type="text" name="user"> 文件名<input type="file" name="file_obj"> <input type="submit"> {% csrf_token %} </form>
视图部分：
import os from mybms import settings def fileput_form(request): print(request.body) # 原始的请求体数据(只有post请求才有请求体,所以只有post请求时request.body才有值) print(request.GET) # GET请求数据 print(request.POST) # POST请求数据 print(request.FILES) # 上传的文件数据 # <MultiValueDict: {'file_obj': [<InMemoryUploadedFile: Desert.jpg (image/jpeg)>]}> file_obj = request.FILES.get("file_obj") # 获取文件对象，即该文件句柄 # 文件对象有一个name属性，获取文件名称字符串 print(file_obj.name) # Desert.jpg path = file_obj.name path = os.path.join(settings.BASE_DIR,"media","img",path) with open(path,"wb") as f: for line in file_obj: # 读文件 f.write(line) # 写文件 return HttpResponse("OK")
2、基于ajax的文件上传
模板部分：
<div> 姓名<input type="text" id="user"> 文件<input type="file" name="file_obj" id="file"> <input type="button" class="filebtn" value="提交"> <p class="msg"></p> </div> <script src="/static/js/jquery.min.js"></script> <script> // 发送文件 $(".filebtn").click(function () { var formdata=new FormData(); formdata.append("file_obj",$("#file")[0].files[0]); formdata.append("user",$("#user").val()); $.ajax({ url:"/fileput/", type:"post", // Ajax上传文件必备参数 processData: false, // 不处理数据 contentType: false, // 不设置内容类型 data:formdata,
success:function (response) { console.log(response); if (response=="OK"){ $(".msg").html("提交成功！") } } }) }) </script>
视图部分和form表单的视图一样即可。
3、补充
ajax以post请求方式发送json格式数据时，解决csrf_token的forbidden的方法是什么？
了解原理：Django服务器获取csrfmiddlewaretoken与后边的随机字符串这个键值对有两种方式，一个是我们之前所学的去request.POST中取，还有另外一种方式，Django会去请求头中去找，而ajax以post请求方式发送json格式数据时，request.POST中没有这个键值对，所以我们可以用如下方式解决，即在发送ajax请求时，加一个请求头，代码如下：
首先要引入一个jquery.cookie.js文件，这是jquery操作cookie的文件，如下：
<script src="/static/js/jquery.cookie.js"></script> $.ajax({ headers:{ "CSRFToken":$.cookie('csrftoken') }, })
三、Django组件 - 分页器（paginator）
1、视图（views.py）
from django.shortcuts import render,HttpResponse # Create your views here. from app01.models import Book # 假设models中有一个书籍表 from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger def index(request): ''' 批量导入数据: booklist = [] for i in range(100): booklist.append(Book(title="book"+str(i), price=30+i*i)) Book.objects.bulk_create(booklist) '''
''' 分页器的使用: book_list = Book.objects.all() paginator = Paginator(book_list, 10) # 实例化对象，每页有10条数据 print("count:", paginator.count) # 数据总数 print("num_pages", paginator.num_pages) # 总页数 print("page_range", paginator.page_range) # 页码的列表 page1 = paginator.page(1) # 第1页的page对象 for i in page1: # 遍历第1页的所有数据对象 print(i) print(page1.object_list) # 第1页的所有数据 page2 = paginator.page(2) # 第2页的page对象 print(page2.has_next()) # 是否有下一页 print(page2.has_previous()) # 是否有上一页 print(page2.next_page_number()) # 下一页的页码 print(page2.previous_page_number()) # 上一页的页码 # 抛错 # page = paginator.page(12) # 超出范围的错误类型，error:EmptyPage # page = paginator.page("z") # error:PageNotAnInteger ''' book_list = Book.objects.all() paginator = Paginator(book_list, 10) current_page_num = request.GET.get('page', 1) try: currentPage = int(current_page_num) book_list = paginator.page(current_page_num) except (PageNotAnInteger, ValueError): book_list = paginator.page(1) # 页码不是数字字符串，返回第一页 currentPage = 1 except EmptyPage: book_list = paginator.page(paginator.num_pages) # 超范围，返回最后一页 currentPage = paginator.num_pages return render(request, "index.html", {"book_list": book_list, "paginator": paginator, "currentPage": currentPage})
2、模板（index.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>paginator</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <h4>分页器</h4> <ul> {% for book in book_list %} <li>{{ book.title }} ----- {{ book.price }}</li> {% endfor %} </ul> <ul class="pagination" id="pager"> {% if book_list.has_previous %} <li class="previous"><a href="/index/?page={{ book_list.previous_page_number }}">上一页</a></li> {% else %} <li class="previous disabled"><a href="#">上一页</a></li> {% endif %} {% for num in paginator.page_range %} {% if num == currentPage %} <li class="item active"><a href="/index/?page={{ num }}"> {{ num }} </a></li> {% else %} <li class="item"><a href="/index/?page={{ num }}"> {{ num }} </a></li> {% endif %} {% endfor %} {% if book_list.has_next %} <li class="next"><a href="/index/?page={{ book_list.next_page_number }}">下一页</a></li> {% else %} <li class="next disabled"><a href="#">下一页</a></li> {% endif %} </ul> </div> </body> </html>
3、分页扩展
def index(request): book_list = Book.objects.all() paginator = Paginator(book_list, 15) page = request.GET.get('page',1) currentPage = int(page) # 如果页数十分多时，换另外一种显示方式 if paginator.num_pages>11: if currentPage - 5 < 1: pageRange = range(1,11) elif currentPage + 5 > paginator.num_pages: pageRange = range(currentPage - 5, paginator.num_pages + 1) else: pageRange = range(currentPage - 5, currentPage + 5) else: pageRange = paginator.page_range try: book_list = paginator.page(page) except PageNotAnInteger: currentPage = 1 book_list = paginator.page(1) except EmptyPage: book_list = paginator.page(paginator.num_pages) currentPage = paginator.num_pages return render(request,"index.html",locals())
