Django之Ajax文件上传

基于form表单的文件上传 

　　　　模板部分

      用户名 <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:
        print(request.POST)
        username = request.POST.get('user')
        file_obj = request.FILES.get('file_obj') #获得文件数据对象
        print('>>>',file_obj,type(file_obj))
        #>>> jaden博客.txt <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>,一个文件对象,可以理解为一个文件句柄
        file_name = file_obj.name #jaden博客.txt
        print(file_name)
        # 将数据写到文件里面,需要名字，需要数据
        with open(file_name,'wb') as f: #直接把文件名字放这里，那么文件将直接生成在django的整个项目目录下，因为django配置的系统搜索的根路径就是咱们的项目文件夹路径，那个BASE_DIR,一般我们需要自己建立一个文件夹专门存放上传的文件
　　　　　　#所以需要我们自己来拼接一个路径放到这里，os.path.join(settings.BASE_DIR,'media','img',file_name)

            # f.write()  #不能一下写进去，占用的内容太多，要一点一点写
            for data in file_obj: #读数据
                f.write(data)  #每次读取的data不是固定长度的，和读取其他文件一样，每次读一行，识别符为\r  \n  \r\n，遇到这几个符号就算是读了一行

　　　　　　　#for chunks in file_obj.chunks(): #chunks()默认一次返回大小为经测试为65536B，也就是64KB，最大为2.5M，是一个生成器
    　　　　 #　 f.write(chunks)

 

　　　　通过js来找文件对象

　　　　　　

 

 

 

基于Ajax的文件上传

　　　　模板

　　　　　　{% 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("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); #别忘了csrf_token
        formdata.append("avatar_img",$("#avatar")[0].files[0]);

        $.ajax({

            url:"",
            type:"post",
            data:formdata, #将添加好数据的formdata放到data这里
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型

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

    })

</script>

　　　　　　或者使用

var form = document.getElementById("form1");
var fd = new FormData(form);

　　　　　　这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。

　　　　　　注意：由于 FormData 是 XMLHttpRequest Level 2 新增的接口，现在 低于IE10 的IE浏览器不支持 FormData。

　　视图

def index(request):

    if request.is_ajax():

        print(request.body)   # 原始的请求体数据
        print(request.GET)    # GET请求数据
        print(request.POST)   # POST请求数据
        print(request.FILES)  # 上传的文件数据

        return HttpResponse("ok")


    return render(request,"index.html")

　　检查浏览器的请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT

 

关于django后端代码接受上传文件的方法