基于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. UVA.699 The Falling Leaves (二叉树 思维题)

    UVA.699 The Falling Leaves (二叉树 思维题) 题意分析 理解题意花了好半天,其实就是求建完树后再一条竖线上的所有节点的权值之和,如果按照普通的建树然后在计算的方法,是不方便 ...

  2. 阿里云学生机——Mysql配置---教小白入门篇

    首先,我的学生机默认配置为:CentOS 7.2 64位 + Tomcat 8 + Jdk8 + MySQL5.7.16 扩展:Linux 如何查看 MySQL 版本号----使用命令 mysql - ...

  3. Matrix-Tree定理题表

    矩阵树这个东西……并不懂什么基尔霍夫矩阵……背了一下结论……(顺便用这个东西加强了一下矩阵)(打板子的时候还是该取负取负,因为不取负才有可能是负数,最后答案一定是正数???(ryf说一定是这样))bz ...

  4. bnuoj25660 Two Famous Companies

    题目链接:https://www.bnuoj.com/v3/problem_show.php?pid=25660 这个二分真的是烧脑QAQ,想了一晚上才懂了一个大概. 首先,整体思路是二分,直观上感受 ...

  5. BZOJ2434: [NOI2011]阿狸的打字机（AC自动机+dfs序+树状数组）

    [NOI2011]阿狸的打字机 题目链接:https://www.luogu.org/problemnew/show/P2414 题目背景 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机. ...

  6. bzoj 1098 [POI2007]办公楼biu bfs+补图+双向链表

    [POI2007]办公楼biu Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 1543  Solved: 743[Submit][Status][Di ...

  7. oracle重新编译失效对像

    重新编译失效对像可执行utlrp.sql文件: SQL> @?/rdbms/admin/utlrp.sql TIMESTAMP --------------------------------- ...

  8. ZooKeeper配额指南(十)

    配额 ZK有命名空间和字节配额.你可以使用ZooKeeperMain类来设置配额.ZK打印警告信息如果用户超过分配给他们的配额.这些信息被打印到ZK的日志中. $java -cp zookeeper. ...

  9. Codeforces Round #380 (Div. 2)/729E Subordinates 贪心

    There are n workers in a company, each of them has a unique id from 1 to n. Exaclty one of them is a ...

  10. python测试rabbitmq简易实例

    生产者 import pika #coding=utf8 credentials = pika.PlainCredentials('guest', '密码') connection = pika.Bl ...