day060 ajax文件上传 json补充

请求头ContentType

文件上传时需要指定请求头,常见的类型有3种:

　　1.application/x-www-form-urlencoded(可以类比成在url后面拼接的形式发送,即a=1&b=2)

　　最常见的POST提交数据的方式.浏览器原生的form表单,如果不设置enctype,默认的提交格式为x-x-www-form-urlencoded. ajax默认也是他.

　　2.multipart/form-data(上传文件的格式)

　　这也是比较常见的POST的数据提交方式,我们使用表单上传文件时,必须让form表单的enctype等于multipart/form-data,form表单不支持发json类型的contenttype格式的数据,二ajax什么格式都可以发.

　　3.application / json(以json字符串的形式发送)

$('.c1').click(function(){
        $.ajax({
            url:'{% url ' home'%}',
            type: post,
            headers:{
               X-CSRFToken:$.cookie('csrftoken'),  #先记住,往后会讲
               ContentType : ' json ',
     },
           data:JSON.stringify(
              如果发送请求的格式是json格式,那么csrf_token必须写在hearders里面,
格式也是cookie,  #contentType也是headers里面的一部分,写在里面外面都可以
)        name:name,
}),
           success:function(response){
                 函数执行体
}
})

　　基于form表单的文件上传 (from的作用一般是提示别人要提交数据)

　　模板部分

<form actions='' method='post' enctype='multipart/form-data'>
contenttype都是键值的形式发送数据,这种form_data的格式一般是把大数据一段一段隔开
用户名 :<input type='text'  name='user'>
头像 : <input type='file' name='avatar'> #上传文件 ,如果不用form_data格式发送,那么默认的是urlencoded格式,这个标签的数据会组成avatar: 文件名字来进行发送
    <input type='submit' >
</form>

　　视图部分

def index(request):
    print(request.body)   # 原始的请求体数据
    print(request.GET)    # GET请求数据
    print(request.POST)   # POST请求数据
    print(request.FILES)  # 上传的文件数据
    
    return render(request,'index.html')

　　upload.py,内容如下: 

def upload(request):
    if request.method=='GET':
        return render(request,'upload.html')

    else:
        username=models.POST.get('user')
        file_obj=models.FILES.get('file_obj') #获得文件数据对象

        file_name=file_obj.name

        with open(file_name,'wb') as f:
            #方式1:
            for data in file_obj:
                f.write(data)
            #方式2:
            for chunks in file_obj.chunks(): #chunks()默认一次返回大小为2.5M,是一个生成器
                f.write(chunks)

基于ajax的文件上传(from用不用都没有关系,这里就是一个盒子的作用)

基于form表单上传文件

1.先导入jquery.js文件

2.再导入jquery.cookie.js文件

要不然会报错提示找不到jQuery文件，页面加载依上而下加载


html部分

要在form表单中写入enctype = “multipart/form-data”（设置请求头）

重点是views.py视图部分：

import os

def upload(request):

　　if request.mthed == “GET”:

　　　　return render(request,”upload.html”)

　　else:

　　　　file_obj = request.FILES.get(“file”) （得到一个文件句柄）

　　　　file_name = file_obj.name       （得到上传的文件的名字）

　　　　path = os.path.join(“E:上传的文件”,file_name)   （设置放置文件的路径）

　　　　with open(path,”wb”) as f:

　　　　　　for i in file_obj:

　　　　　　　　f.write(i)            （循环遍历写入上传的文件）

　　　　　　　　return HttpResponse(“ok”)

基于Ajax上传文件：

1. 我们只需要input输入框
两个输入框其中一个设置为type = “file”，用来获取文件
一个button按钮
设置相关的name和id值

2.    导入jQuery.cookie.js文件要在jQuery.js文件之后
3.    设置提交按钮的单击事件
$(“#btn”).click(function (){
var formdata = new FormData();（Ajax上传文件时，需要这个类型，它会将添加给他的键值对加工成formdata类型）

var username = $(“$username”).val() （获取输入框的内容）

var file = $(“#file”)[0].files[0]; （$(“#file”)[0].files得到的是一个文件列表，[0]取第一                                项）
formdata.append(“username”,username);
formdata.append(“file”,file);        （在formdata对象中添加数据）
$.ajax({
url:”{% url ‘upload’ %}”,
type:”post”,
headers:{"X-CSRFToken":$.cookie("csrftoken")},}) （设置请求头，通过post请求，   csrf_token）

processData:false,        （不处理数据）
contentType:false,        （不设置内容类型）
data:formdata,        （将添加好数据的formdata放到data）
success:function(request){

}
})

这两个前端共用同一个views.py的方法即可但是要注意name对应的值要一样要不然取不到值，报错

模板

<form> #用不用form没关系，这里就是个盒子的作用，一般写form标签是为了提示别人，这个地方的内容是要提交的
　　　　　　{% csrf_token %}
      用户名 <input type="text" id="user">
      头像 <input type="file" id="avatar">
     <input type="button" id="ajax-submit" value="ajax-submit">
</form>

<script>

    $("#ajax-submit").click(function(){
        var formdata=new FormData(); #ajax上传文件的时候，需要这个类型,它会将添加给它的键值对加工成formdata的类型
        formdata.append("user",$("#user").val());  #添加键值的方法是append,键和值之间是逗号 formdata.append('crfmiddlewaretoken',$('[name=csrfmiddlewaretoken]').val());
        formdata.append(avatar_img,$('#avatar')[0].files[0]);
　　　　 $.ajax({
　　　　　　url: '',
　　　　　　type: 'post',
　　　　　　data: formdata,将添加好的formdata放到data里
　　　　　　processData:false,  #不处理数据
　　　　　　contentData:false,  #不设置内容类型
　　　　　　success :function(data){
　　　　　　　　console.log(data)
　　　　　　　　　　　　　　}
　　　　　　})
})

</script>

关于json

JSON指的是JavaScript对象表示法

JSON是轻量级的文本数据交换格式

JSON独立于语言

JSON具有自我描述性,更易理解