Django - 文件上传

一.文件上传准备知识 - Content-Type

1.请求头- Content-Type

　　Content指的是请求体的编码类型，常见的类型有3中：

　　1.application/x-www-form-urlencoded

　　post提交数据最常见的的编码类型了。浏览器的表单from，如果不设置enctype属性值，默认的请求体编码类型就是application/x-www-form-urlencoded

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

　　模版部分：

<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 不会遇上什么麻烦。

　　示例：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')
　　　　},
　　})