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')
相关文章
|
6天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
6天前
|
人工智能 运维 监控
《后端技术的未来:智能化引领下的创新与挑战》
传统的后端技术在智能化时代迎来了前所未有的转变。本文探讨了智能化技术在后端领域的应用和影响,以及智能化引领下的创新与挑战。通过分析智能化技术对后端系统架构、开发流程、运维管理等方面的影响,展望了后端技术的未来发展趋势。
18 1
|
2天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术演进
本文探讨了从前端到后端的技术演进,介绍了前端、后端以及多种编程语言,如Java、Python、C、PHP和Go,以及数据库在构建现代化Web应用中的应用。通过深入剖析各个技术领域的发展和应用,读者将对构建高效、可扩展、安全的Web应用有更深入的理解。
|
5天前
|
前端开发 Java Go
从前端到后端:构建现代化Web应用的技术实践
本文将介绍如何通过前端和后端技术相结合,构建现代化Web应用的技术实践。我们将探讨前端开发、后端架构以及多种编程语言(如Java、Python、C、PHP、Go)在构建高效、可扩展的Web应用中的应用。
|
6天前
|
JavaScript 前端开发 IDE
【TypeScript技术专栏】TypeScript与Node.js后端开发
【4月更文挑战第30天】TypeScript在Node.js后端开发中日益重要,作为JavaScript超集,它提供静态类型检查和面向对象编程,增强代码可靠性和维护性。集成TypeScript能带来类型安全、更好的IDE体验、易于维护的代码以及增强工具支持。通过安装TypeScript编译器、编写TypeScript文件、配置TSconfig,开发者可以在Node.js项目中利用其高级特性,提高代码质量和开发效率。实践案例显示,TypeScript能确保路由处理器的类型正确,降低错误率。随着社区发展,TypeScript成为提升Node.js开发体验的推荐选择。
|
6天前
|
存储 缓存 算法
后端技术优化与应用研究
后端技术优化与应用研究
17 1
|
6天前
|
机器学习/深度学习 Kubernetes 微服务
后端技术发展及其在高性能系统中的应用研究
后端技术发展及其在高性能系统中的应用研究
18 0
|
6天前
|
存储 前端开发 JavaScript
从前端到后端:构建全栈应用的关键技术探究
在当今互联网时代,全栈开发已经成为了越来越多开发者的追求目标。本文将深入探讨从前端到后端构建全栈应用所需的关键技术,涵盖了前端框架选择、后端语言与框架、数据库设计以及前后端通信等方面,帮助读者全面了解全栈开发的必备技能和工具。
|
6天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
6天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。