<h3>基于form表单的上传文件</h3>

<form action="" method="post" enctype="multipart/form-data">

    {% csrf_token %}

    <p><input type="text" name="user"></p>

    <p><input type="file" name="f"></p>

    <input type="submit">

</form>

def index(request):

    if request.method=="POST":

        print(request.POST)

        print(request.FILES.get("f"))

        obj=request.FILES.get("f")

        name=obj.name

        f_write=open(name,"wb")

        for  line in obj:

            f_write.write(line)

        return HttpResponse("success")

    return render(request,"index.html")

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件

<h3>基于ajax的文件上传</h3>

{% csrf_token %}

<p><input type="text" id="pwd"></p>

<p><input type="file" id="file"></p>

<button class="ajax_btn">提交</button>

<script>

    $(".ajax_btn").click(function () {

        var formdata=new FormData();

        formdata.append("pwd",$("#pwd").val());

        formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());

        formdata.append("f",$("#file")[0].files[0]);

        $.ajax({

            url:"/put_ajax/",

            type:"post",

            data:formdata,

            contentType:false,

            processData:false,

            success:function (data) {

                console.log(data);

            }

        })

    })

</script>

def put_ajax(request):

    print(request.POST)

    print(request.FILES)

    return HttpResponse("OK")