文件上传

一、form表单发送文件

​ form表单中必须指定enctype="multipart/form-data"，使用表单上传文件时，因为form表单不支持发json类型的contenttype格式的数据

<form action="{% url 'upload' %}" method="post" enctype="multipart/form-data" style="background-color: blanchedalmond">
    <label for="myfile" class="col-sm-2 control-label">头像</label>
    <div class="col-sm-4">
        <input type="file" class="" id="myfile" name="head_pic">
        <span class="help-block">只支持png、jpg、gif格式</span>
    </div>
    <input type="submit">
    {% csrf_token %}
</form>

'''后端'''
def upload(request):
    if request.method =='GET':
        return redirect('test')
    else:
        '''
        request.POST只能<QueryDict: {'head_pic': ['WechatIMG59.jpeg'], 'csrfmiddlewaretoken': ['KuCMXie1V4nNYwR45cxU1CpffUKypYvh5dicQnqrq30bkKWavIt41aLlES2NtdWG']}>
        并未拿到上传的文件的数据
        '''
        print(request.POST)
        '''<MultiValueDict: {'head_pic': [<InMemoryUploadedFile: WechatIMG59.jpeg (image/jpeg)>]}>'''
        print(request.FILES)
        file_obj = request.FILES.get('head_pic')
        # WechatIMG59.jpeg
        print(file_obj)
        # 获取文件名称
        file_name = file_obj.name
        path = os.path.join(settings.BASE_DIR, 'static_file', 'img', file_name)
        with open(path, 'wb') as f:
            # 每次读取的data不是固定长度的，和读取其他文件一样，每次读一行，识别符为\r  \n  \r\n，遇到这几个符号就算是读了一行
            for i in file_obj:
                f.write(i)
            '''chunks()默认一次返回大小为经测试为65536B，也就是64KB，最大为2.5M，是一个生成器
            	 可以修改其大小，在global_settings配置
            '''
            # for chunks in file_obj.chunks():
                # f.write(chunks)
        return HttpResponse('上传成功！')

二、ajax发送文件

$('#b1').click(function (){
    console.log($('#file')[0]);
    console.log($('#file')[0].files);
    console.log($('#file')[0].files[0]);

    {#必须实例化一个FormData对象，FormData对象可以带文件数据#}
    var formdata = new FormData()
    {#$('#file')[0]变为DOM对象，.files[0]取第一个文件对象#}
    formdata.append('head_pic', $('#file')[0].files[0]);
    formdata.append('csrfmiddlewaretoken', '{{ csrf_token }}');
    $.ajax({
        url:'{% url 'upload' %}',
        type: 'post',
        data:formdata,
        {#ajax传输文件必须加上以下两句话#}
        {#不处理数据#}
        processData:false,
        {#不设置内容类型#}
        contentType: false,

        success:function (res){
            console.log(res)
        }
    })
})