基于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. HDOJ(HDU).1284 钱币兑换问题 (DP 完全背包)

    HDOJ(HDU).1284 钱币兑换问题 (DP 完全背包) 题意分析 裸的完全背包问题 代码总览 #include <iostream> #include <cstdio> ...

  2. 【BZOJ 3811】玛里苟斯 大力观察+期望概率dp+线性基

    大力观察:I.从输出精准位数的约束来观察,一定会有猫腻,然后仔细想一想,就会发现输出的时候小数点后面不是.5就是没有 II.从最后答案小于2^63可以看出当k大于等于3的时候就可以直接搜索了 期望概率 ...

  3. Codeforces Round #340 (Div. 2)B

    B. Chocolate time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  4. CMDB服务器管理系统【s5day88】：兼容的实现

    比较麻烦的实现方式 类的继承方式 目录结构如下: auto_client\bin\run.py import sys import os import importlib import request ...

  5. iPhoneX页面安全区域与内容重叠问题

    转载自:https://www.cnblogs.com/lolDragon/p/7795174.html 1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iP ...

  6. Html5 面试题汇总

    1.HTML5 为什么只需要写 <!DOCTYPE HTML>? 答案解析: Html5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他 ...

  7. Android项目分包---总结-------直接使用

    注: 本文是从该文摘抄而来的.简单的说,就是阅读了该文,然后,再自己复述,复制形成该文.   1.罗列Android项目的分包规则   微盘使用分包规则   如下:     1).第一层com.sin ...

  8. Spring的使用优点

    spring事物配置,声明式事务管理和基于@Transactional注解的使用 spring支持编程式事务管理和声明式事务管理两种方式. 编程式事务管理使用TransactionTemplate或者 ...

  9. Spring 框架的设计理念与设计模式分析（山东数漫江湖）

    Spring 的骨骼架构 Spring 总共有十几个组件,但是真正核心的组件只有几个,下面是 Spring 框架的总体架构图: 图 1 .Spring 框架的总体架构图 从上图中可以看出 Spring ...

  10. bzoj 1046 LIS

    假设我们知道以每个点开始到最后的最长上升序列,设为w[i],这样首先我们在w值中取max,如果询问的值比max大,这样显然就是无解,如果小的话,我们需要求出来字典序最小的方案. 那么对于所有i,我们肯 ...