基于Django实现文件上传

1. url路由配置

路径：C:\Users\supery\Desktop\day82\demo_ajax\demo_ajax\urls.py

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^upload/', views.upload),

]

2. 视图函数代码

def upload(request):

    if request.method=="POST":

        print("POST", request.POST)

        print("FILES",request.FILES)  # FILES <MultiValueDict: {}>

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

        print(file_obj.name,"-----")

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

            for i in file_obj:

                f.write(i)

        return HttpResponse("成功")

    return render(request,"upload.html")

3. 静态文件

路径：C:\Users\supery\Desktop\day82\demo_ajax\templates\upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

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

    {% csrf_token %}

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

    <p>头像<input type="file" name="avatar"></p>

    <input type="submit">

</form>

</body>

</html>

基于Ajax实现上传文件

1. 路由规则

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^index/', views.index),

    url(r'^get_ajax/', views.get_ajax),

    url(r'^upload/', views.upload),

]

　　

2. 视图函数

def index(request):

    return render(request," index_formdata.html")

3. 静态文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .login_error{

            color: red;

        }

    </style>

</head>

<body>

{% csrf_token %}

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

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

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

    <p>头像<input type="file" id="upload_avatar"></p>

</form>

<p><button class="Ajax_send">Ajax_send</button><span class="login_error"></span></p>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

{#<script src="/static/index.js"></script>#}

<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>

     function foo() {

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

    }

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

        var formData=new FormData();

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

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

        formData.append("avatar",$("#upload_avatar")[0].files[0]);

        // ajax请求

        $.ajax({

            url:"/get_ajax/",

            type:"POST",

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

            data:formData,

            contentType:false,

            processData:false,

            success:function (data) {

                var data=JSON.parse(data);

                console.log(data);

                console.log(typeof data);

                // $(".error").html(data)

                if(!data["flag"]){

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

                    setTimeout(foo,3000)

                }

            }

        })

    })

</script>

</body>

</html>

4. get_ajax代码

def get_ajax(request):

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

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

    print("FIFLE",request.FILES)           # 上传文件对象

    print("POST",request.POST)

    response={"flag":False}

    if username=="yuan" and password=="123":

        response["flag"]=True

    import json

    return HttpResponse(json.dumps(response))

　　

　　

　　

　　

　　

　　

　　

Django Ajax学习二之文件上传的更多相关文章

  1. Django：学习笔记(8)——文件上传

    Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...

  2. SpringMVC:学习笔记(8)——文件上传

    SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...

  3. django 12天(跨域,文件上传,下载，cookie，session)

    django 12天(跨域,文件上传,下载) 跨域 什么是跨域 1.协议不同 2.端口不同 3.主机不同 如何解决跨域 1.安装django-cors-headers模块 2.在settings.py ...

  4. ajax方式提交带文件上传的表单,上传后不跳转

    ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...

  5. Java进阶学习：将文件上传到七牛云中

    Java进阶学习:将文件上传到七牛云中 通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...

  6. Javaweb学习笔记——（二十二）——————文件上传、下载、Javamail

    文件上传概述      1.文件上传的作用          例如网络硬盘,就是用来上传下载文件的.          在网络浏览器中,时常需要上传照片 2.文件上传对页面的要求          上 ...

  7. Javaweb学习笔记10—文件上传与下载

    今天来讲javaweb的第10阶段学习.文件的上传与下载,今天主要说的是这个功能的实现,不用说了,听名字就是外行人也知道肯定很重要啦. 老规矩,首先先用一张思维导图来展现今天的博客内容.       ...

  8. MVC5：使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  9. springmvc学习笔记--支持文件上传和阿里云OSS API简介

    前言: Web开发中图片上传的功能很常见, 本篇博客来讲述下springmvc如何实现图片上传的功能. 主要讲述依赖包引入, 配置项, 本地存储和云存储方案(阿里云的OSS服务). 铺垫: 文件上传是 ...

随机推荐

  1. spring全局异常处理 自定义返回数据结构

    在写api接口中,正常返回和异常错误返回我们都希望很清楚的将这些信息清楚的返回给用户,出现异常情况下需要清楚的知道是参数异常还是未知异常,而不是返回一个不正确的数据结构. 所以此处只针对写api接口时 ...

  2. hdu 1698 线段树 区间更新 区间求和

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  3. HDU1254 bfs

    推箱子 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  4. mysql 修改max_connections

    1.使用命令show variables 来查看当前最大连接数 show variables like '%max_connections%'; 使用命令set global max_connecti ...

  5. java项目环境搭建

    开发java项目时,由于涉及到版权问题,最好使用开源.免费的软件.比如eclipse. 此外,一个web的java项目涉及到jdk.tomcat等,插件还可能用到svn插件.maven插件. 建议进入 ...

  6. Android程序始终横屏

    在AndroidManifest.xml文件里面的activity标签中加入以下属性 android:screenOrientation="landscape" android:c ...

  7. [Luogu 2590] ZJOI2008 树的统计

    [Luogu 2590] ZJOI2008 树的统计 裸树剖不解释. 比板子还简单. #include <algorithm> #include <cstdio> #inclu ...

  8. Enterprise Architect13 ： 去掉UML图页面右侧那一道竖线

    我们在使用Enterprise Architect 中,画用例图,时序图时,页面右侧有一条竖线,见下图: 如果页面元素太多,会超出竖线的范围,显得很不协调. 如果像去掉竖线,只需选择主菜单的Layou ...

  9. 【BZOJ】1202: [HNOI2005]狡猾的商人

    [题意]w组数据,给定n和m,给出m段区间[s,t](1<=s<=t<=n)的数字和,求是否矛盾.n<100,m<1000,w<100. [算法]带权并查集 [题解 ...

  10. resultAPI示例

    什么是Restfull API Restfull API 从字面就可以知道,他是rest式的接口,所以就要先了解什么是rest rest 不是一个技术,也不是一个协议 rest 指的是一组架构约束条件 ...