基于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. lighttpd - 配置文件

    转载其他网站,收藏查看! 配置文件lighttpd.conf参数详细说明的链接和选译 发表于 2010年12月22日 http://redmine.lighttpd.net/projects/ligh ...

  2. Flex 布局教程：语法篇 【转】

    Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网 ...

  3. finetune on caffe

    官方例程:http://caffe.berkeleyvision.org/gathered/examples/finetune_flickr_style.html 相应的中文说明:http://blo ...

  4. springboot集成junit测试与javamail测试遇到的问题

    1.springboot如何集成junit测试? 导入junit的jar包 使用下面注解: @RunWith()关于这个的解释看下这两篇文章: http://www.imooc.com/qadetai ...

  5. c#知识梳理

    转:http://www.cnblogs.com/zhouzhou-aspnet/articles/2591596.html 本文是一个菜鸟所写,本文面向的人群就是像我这样的小菜鸟,工作一年也辛辛苦苦 ...

  6. UVA 10201 DP

    Adventures in Moving - Part IV 题意: 汽车邮箱容量200升,最初有100升油,要求到达终点油箱中的油不少于100升的最小花费,不能到达终点输出Impossible. 汽 ...

  7. HDU1569 最大流（最大点权独立集）

    方格取数(2) Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  8. java正则 以什么开始，以什么结束

    public class RegTest { public static void main(String[] args){ String regex = "\\[([\\s\\S]*?)\ ...

  9. 用好printf和scanf

    转载自:http://hi.baidu.com/wuxicn/item/f648fe1970f86917e3f98682 在C中,printf系列函数(fprintf, sprintf...)和sca ...

  10. sql文件导入时出错

    使用Navicat 连接工具连接mysql数据库. mysql数据库建立后,导入sql文件报错: [Err] 1064 - You have an error in your SQL syntax; ...