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

简介: 一、Form表单方式提交:form表单提交文件或者图像时需要对form中的属性进行如下设置:1、method="post" //提交方式 post2、enctype="multipart/form-data" //不对字符编码。

一、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')
相关文章
|
8月前
|
编解码 前端开发 JavaScript
技术经验分享:Django学习日记
技术经验分享:Django学习日记
|
8月前
|
NoSQL Redis Python
技术经验分享:Django实现websocket
技术经验分享:Django实现websocket
44 0
|
5月前
|
XML 前端开发 JavaScript
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
本文介绍了在PHP中如何使用Ajax进行登录表单的数据提交,并利用jQuery的$.post()方法与后端通信,以及使用layer.msg进行前端提示。
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
|
4月前
|
存储 数据管理 API
零代码能力:轻松搞定表单和API接口,少写80%后端代码,内含资源
小白接口(果创云 YesApi.cn)是一个零代码和低代码开发平台,提供一站式后端云服务,帮助开发者、学生、业余爱好者、工作室、中小企业及无IT技术人员的传统企业快速搭建应用、接口、服务和网站。平台提供500+免费API接口,支持在线API开发、在线表单、数据库管理、图片文件存储、会员管理等功能,无需后端开发经验,轻松实现数据处理和应用开发。
|
6月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
6月前
|
JSON 前端开发 API
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
82 2
|
5月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术
|
6月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
355 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
6月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
74 0
|
6月前
|
JavaScript 安全 数据安全/隐私保护
深入Node.js与Express:从表单接收到数据验证的完整指南——实战技巧揭秘后端开发中的表单处理流程
【8月更文挑战第31天】在Web开发中,处理表单数据至关重要。本文通过实例详细讲解了如何利用Node.js与Express框架接收和验证表单数据。首先,搭建环境并初始化一个简单的Express应用;接着,演示如何接收用户注册表单中的`username`和`email`字段;最后,引入`joi`模块进行数据验证,确保数据安全准确。掌握这些技能有助于开发者构建更安全、友好的Web应用。随着Node.js和Express的不断进步,未来将有更多高级功能值得期待。
162 0