Django中ajax技术和form表单两种方式向后端提交文件

一、Form表单方式提交：
form表单提交文件或者图像时需要对form中的属性进行如下设置：
1、method="post" //提交方式 post
2、enctype="multipart/form-data" //不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
3、action="/code/" //提交给哪个url

code.html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>代码统计</title>
</head>
<body>
<form method="post" enctype="multipart/form-data"     action="/code/">
{% csrf_token %}
<input type="file" name="file" value="上传文件">
<button type="submit" id="btn">提交</button>
</form>
</body>
</html>

url

url(r'code/$',views.code)

views.py

def code(request):
    if request.method == "POST":
        filename = request.FILES['file'].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
        return HttpResponse('上传成功')
    return render(request, 'code.html')

二、ajax方式提交文件：
直接上代码吧，代码有注释
code.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码统计</title>
</head>
<body>
<form>
    {% csrf_token %}
    <input type="file" name="file" value="上传文件">
    <button type="button" id="btn">提交</button>
</form>

<script src="/static/js/jquery-3.3.1.js"></script>
<script>
    $("#btn").click(function () {
        //创建一个FormData对象用来存储数据
        var file_obj = new FormData;
        //通过jquery的的属性操作找到上传的文件,
        // 注意files方法是js对象的特有的方法，所以需要将jquery对象索引转化成js对象调用此方法
        file_obj.append('file', $("input[type='file']")[0].files[0]);
        //jquery的属性操作获取csrftoken值来防御CSRF攻击
        file_obj.append('csrfmiddlewaretoken',     $('[name=csrfmiddlewaretoken]').val());
        $.ajax({
            url: '/code/',
            type: 'post',
           processData: false,//不让jQuery处理我的file_obj
            contentType: false,//不让jQuery设置请求的内容类型
            data: file_obj,
            //成功回调函数
            success: function (res) {
                console.log(res.msg)
            }
        })
    })
</script>
</body>
</html>

url:

  url(r'code/$',views.code)

views.py:

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
def code(request):
    res={'code':0}
    if request.method == "POST":
        file_obj = request.FILES['file']
        filename = file_obj.name
        with open(filename, 'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        res['msg'] = '上传成功'
        return JsonResponse(res)
    return render(request, 'code.html')

Django中ajax技术和form表单两种方式向后端提交文件

推荐阅读更多精彩内容