django 之 ajax 篇上传文件

最新推荐文章于 2022-03-25 15:55:46 发布

color_coral

最新推荐文章于 2022-03-25 15:55:46 发布

阅读量2.9k

点赞数 4

分类专栏： django

django 专栏收录该内容

6 篇文章

订阅专栏

博客提及了Ajax上传文件，包含前端部分以及后端的settings.py相关内容，聚焦于信息技术中文件上传的前后端操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    {% csrf_token %}
    <input type="text" name="name" id="username"><span>输入正确</span>
    <br/>
    <input type="button" value="提交" id="submit">
</form>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $("#submit").click(function(){
        var username = $('#username').val();
        var csrc_data = $('[name=csrfmiddlewaretoken]').val();
        $.ajax({
            url:'{% url "home" %}',
            type:'get',
            data:{
                name:username,
                csrf_token: csrc_data,
            },
            success:function(response){
                console.log(response)
                alert(response)
            }
        })
    })
</script>
</body>
</html>

ajax上传文件（前段）：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="{% url 'upload' %}" enctype="multipart/form-data" method="post">
    {% csrf_token %}
    {#    <img src="{% static 'img/111.jpg' %}" alt="">#}
    <input type="text" name="name" id="ajaxname"><span>输入正确</span>
    头像：<input type="file" name="ajaxele" id="ajaxele">

    <br/>
    <input type="button" value="提交" id="btn">
</form>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

    $("#btn").click(function () {

        //创建对象
        var formdata = new FormData();
        //这里FormData是一个jquery对象，用来绑定values对象，也可以用来上传二进制文件，有了他就可以不用form表单来上传文件了

        var username = $('[name=ajaxname]').val();
        var file_obj = $('[name=ajaxele]')[0].files[0];
        var csrf_data = $('[name=csrfmiddlewaretoken]').val();
        formdata.append('username',username);
        formdata.append('file_obj',file_obj);
        formdata.append('csrfmiddlewaretoken',csrf_data);

        $.ajax({
            url:'{% url "upload" %}',
            type:'post',
            data:formdata,
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型
            success:function (res) {
                console.log(res);
            }
        })
    })
</script>
</body>
</html>

后端：

def upload(request):

    # name = request.POST()
    # return HttpResponse('ok')
    if request.method == 'GET':
        return render(request, 'upload.html')
    else:
        file_obj = request.FILES.get('file_obj')
        # 这里的file_obj拿到了文件的对象，这个对象包含了文件的名字，二进制内容
        # print(file_obj, type(file_obj))
        file_name = file_obj.name
        import os
        file_path = os.path.join(settings.BASE_DIR, 'static2', 'img', file_obj.name)
        # 这里file_path是存储文件的路径
        # print(settings.BASE_DIR)

        with open(file_path, 'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse('ok')

settings.py:

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'statics'),
    os.path.join(BASE_DIR, 'static2'),
]

django 之 ajax 篇 上传文件

django 之 ajax 篇上传文件