前端代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-3.2.1.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

</head>

<body>

<h1>文件上传页面</h1>

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

    {% csrf_token %}

    <p>用户名：<input type="text" name="username"></p>

    <p>文件：<input type="file" name="file"></p>

    <input type="submit" value="提交"><span>{{ successful }}</span>

</form>

</body>

</html>

后端处理：

def upload(request):

    if request.method == "GET":

        return render(request,"upload.html")

    else:

        file_obj = request.FILES.get("file")

        with open(file_obj.name,"wb") as f:

            for line in file_obj:

                f.write(line)

        successful = "上传成功"

        return render(request,"upload.html",locals())

效果图：

利用formdata上传文件：

用formdata上传需要先建立一个对象，然后这个对象吧里面的值append进去，串数据的时候直接把formdate串过去就好了

前端代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery-3.2.1.min.js"></script>

    <script src="/static/jquery.cookie.js"></script>

</head>

<body>

<form action="" id="s1">

    <p>姓名：<input type="text"></p>

    <p>密码：<input type="password"></p>

    <p>头像：<input type="file" id="upload" name="file"></p>

</form>

<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>        #button需要放在form表单外边

</body>

<script>

    function foo() {

        $(".login_error").html("")

    }

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

        var formDate = new FormData();

        formDate.append("username",$(":text").val());

        formDate.append("password",$(":password").val());

        formDate.append("avatar",$("#upload")[0].files[0]);

        $.ajax({

            url:"/ajax_form/",

            type:"POST",

            headers:{"X-CSRFToken":$.cookie('csrftoken')},

            data:formDate,

            contentType:false,

            processData:false,

            success:function (data) {

                var data = JSON.parse(data);

                if(!data["flag"]){

                    $(".login_error").html("用户名或密码错误")

                    setTimeout(foo,3000)

                }

                else{

                    alert("上传成功")

                }

            }

        })

    })

</script>

</html>　

后端代码：

def ajax_form(request):

    if request.method == "GET":

        return render(request,"formdate.html")

    else:

        username = request.POST.get("username")

        password = request.POST.get("password")

        file_obj = request.FILES.get("avatar")

        print("===================>",file_obj)

        with open(file_obj.name, "wb") as f:

            for line in file_obj:

                f.write(line)

        response = {"flag":False}

        if username=="username" and password == "password":

            response["flag"] = True

        import json

        return HttpResponse(json.dumps(response))　

简单的上传操作会让页面刷新，还有利用ajax无刷新技术上传的方式↓

Django普通文件上传的更多相关文章

  1. python Django之文件上传

    python Django之文件上传 使用Django框架进行文件上传共分为俩种方式 一.方式一 通过form表单进行文件上传 #=================================== ...

  2. day56:django:csrf_token&文件上传

    目录 1.csrf介绍 2.django实现csrf_token认证 3.django实现文件上传 csrf介绍 什么是csrf? csrf:跨站请求伪造.攻击者通过HTTP请求将数据传送到服务器,从 ...

  3. Django(十七)文件上传

    http://www.cnblogs.com/wupeiqi/articles/5703697.html - 文件上传        - 普通上传        - 自定义页面上传按钮        ...

  4. 框架----Django之文件上传

    一.文件上传 1. 浏览器访问 http://127.0.0.1:8000/f1/ http://127.0.0.1:8000/f2/ 2. urls from django.conf.urls im ...

  5. Django的文件上传以及预览、存储

    思路: 文件上传通过前端的input标签,input设置display:none属性. 内容显示需要让前端通过<img>标签读取图片内容,可以通过<label>标签连接< ...

  6. Django实现文件上传功能

    文件上传 关注公众号"轻松学编程"了解更多. 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置,MEDIA_ROOT=o ...

  7. django 的文件上传

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  8. Django处理文件上传File Uploads

    HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data <form enctype="m ...

  9. Django之文件上传

    一.form表单上传文件 注意: 1.form上需要加enctype="multipart/form-data" 2.form提交的地址需要以/结尾 def form_file(r ...

随机推荐

  1. Asp.Net Web API（二）

    创建一个Web API项目 第一步,创建以下项目 当然,你也可以创建一个Web API项目,利用 Web API模板,Web API模板使用 ASP.Net MVC提供API的帮助页. 添加Model ...

  2. 三菱Q系列PLC的io分配

    1.系统基本配置 2.存储卡配置 3.外部IO标号 4.主基板IO模块的IO号分配 5.扩展基板IO口标号 6.标准配置实例 7. 一.输入采样阶段 在输入采样阶段,可编程逻辑控制器以扫描方式依次地读 ...

  3. MySQL数据库 Event 定时执行任务.

    一.背景 由于项目的业务是不断往前跑的,所以难免数据库的表的量会越来越庞大,不断的挤占硬盘空间.即使再大的空间也支撑不起业务的增长,所以定期删除不必要的数据是很有必要的.在我们项目中由于不清理数据,一 ...

  4. myecplise自带的tomcat问题

    今天做一个项目时候,发现myecplise自带的tomcat上面部署了是可以运行的,可是当部署到自己下载的tomcat时候,就报错,tomcat可以启动,项目无法启动,查了问题,发现是web,xml中 ...

  5. JDK动态代理[1]----代理模式实现方式的概要介绍

    日常工作中经常会接触到代理模式,但一直没有对其进行深究.代理模式一直就像一团迷雾一样存在我心里,什么是代理模式?为什么要使用代理?代理模式有哪些实现?它的底层机制是怎样的?这些问题促使着我迫切想要揭开 ...

  6. python各种类型的转换

    #进制转换 ord(x) #将一个字符转换为它的整数值 hex(x) #将一个整数转换为一个十六进制字符串 oct(x) #将一个整数转换为一个八进制字符串 #类型转换int(x [,base ]) ...

  7. lesson - 1 aming

    一.  Linux是什么* 关于Linux历史(http://www.aminglinux.com/bbs/thread-6568-1-1.html  需要大家查查资了解,也可以看看5期的视频)* 发 ...

  8. Oracle添加记录的时候报错：违反完整性约束,未找到父项关键字

    今天需要向一个没有接触过的一个Oracle数据库中添加一条记录,执行报错: 分析: 报错的根本原因:未找到父项关键字的原因是因为你在保存对象的时候缺失关联对象. 问题的解决思路:先保存关联对象后再保存 ...

  9. css3特效样式库

    直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...

  10. K：HashMap中hash函数的作用

      在分析了hashCode方法和equals方法之后,我们对hashCode方法和equals方法的相关作用有了大致的了解.在通过查看HashMap类的相关源码的时候,发现其中存在一个int has ...