Django：contentType + 文件上传

contentType

contentType 是请求消息之请求头中的类型，主要的作用是告诉服务端，浏览器是以什么类型数据发送，通知服务端用什么数据类型来解包。

我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：
<method> <request-url> <version>
<headers>

<entity-body></entity-body></headers></version></request-url></method>
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。

但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。所以说到 POST 提交数据方案，包含了 Content-Type 和消息主体编码方式两部分。下面就正式开始介绍它们。

其中：contentType常见的提交数据方式有四种。

一、application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。

1、<form>表单中

　　浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么默认就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）

　　也可以设置 entype 属性，将提交的类型转为其他类型

    POST http://www.example.com HTTP/1.1
    Content-Type: application/x-www-form-urlencoded;charset=utf-8

    user=yuan&age=22

2、ajax 请求

　　发送 post 请求时，默认也是 application/x-www-form-urlencoded，但是可以通过设置 contentType 指定发送数据类型

3、示例：ajax以application/x-www-form-urlencoded方式提交数据（实现一个简单计算器）

　　模板 html

<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))   #HttpResponse必须是字符串，不是字符串的要序列化为字符串

二、multipart/form-data

这应该是最常见的 POST 提交数据的方式了。该数据类型是用来上传文件的，

1、<form表单>

　　form表单上传文件时，要指定 enctry = "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 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

2、ajax 请求

　　ajax 请求发送文件的时候，要发送 FormData 数据，但是 contentType 并不是单纯的指定 multipart/form-data，

　　而是:　

 // Ajax上传文件必备参数
processData: false ,    // 不处理数据
contentType: false,    // 不设置内容类型

总结：上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段原生 form 表单也只支持这两种方式。但是随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

三、application/json

只有ajax 才可以发送 json 数据。form表单请求不能提交json格式数据，ajax请求可以支持提交以上三种数据格式，但用于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表单文件上传

模板（html）

<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>

视图（views）

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")

二、基于ajax 的文件上传

模板（html）

<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>

视图（views）

　　与 form 表单上传文件视图一样

问题1：ajax 发送post请求，如何解决 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')
　　　　},
　　})

posted @ 2018-11-24 18:29 葡萄想柠檬 Views(553) Comments(0) 收藏举报

刷新页面返回顶部

葡萄想柠檬