前端实现

<!DOCTYPE html>

<html lang="zh-CN">

<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>

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<h2>基于form表单的上传文件</h2>

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

    {% csrf_token %}

    <p><input type="text" name="user"></p>

    <p><input type="file" name="f"></p>

    <input type="submit">

</form>

<hr>

<h2>基于ajax上传文件</h2>

{% csrf_token %}

<p><input type="text" id="user"></p>

<p><input type="file" id="f"></p>

<button class="ajax_btn">上传</button>

<script>

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

        var formdata = new FormData();

        formdata.append("user", $("#user").val());

        formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());

        formdata.append("f", $("#f")[0].files[0]);

        $.ajax({

            url: "/put_ajax/",

            type: "post",

            data: formdata,

            contentType: false,

            processData: false,

            success: function (data) {

                alert("上传成功！")

            }

        })

    })

</script>

</body>

</html>

index.html

后端实现

from django.shortcuts import render, HttpResponse

# Create your views here.

def index(request):

    if request.method == "POST":

        print(request.POST)

        print(request.FILES.get("f"))

        f_obj = request.FILES.get("f")

        name = f_obj.name

        f_write = open(name, "wb")

        for line in f_obj:

            f_write.write(line)

        return HttpResponse("上传成功")

    return render(request, 'index.html')

def put_ajax(request):

    if request.is_ajax():

        f_obj = request.FILES.get("f")

        print(f_obj)

        name = f_obj.name

        print(name)

        f_write = open(name, "wb")

        for line in f_obj:

            f_write.write(line)

        return HttpResponse("上传成功")

    return render(request, 'index.html')

Views.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'^put_ajax/', views.put_ajax),

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

]

url.py

图示：

上传前：

进行上传：

上传后：

Django 基于Ajax & form 简单实现文件上传的更多相关文章

  1. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  2. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  3. Django 实现简单的文件上传

    今天分享一下Django实现的简单的文件上传的小例子. 步骤 创建Django项目,创建Django应用 设计模型 处理urls.py 以及views.py 设计模板,设计表单 运行项目,查看数据库 ...

  4. 基于uploadify.js实现多文件上传和上传进度条的显示

    uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...

  5. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  6. 使用jsp/servlet简单实现文件上传与下载

    使用JSP/Servlet简单实现文件上传与下载    通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...

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

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

  8. nodejs 实现简单的文件上传功能

    首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...

  9. DVWA靶机--简单的文件上传漏洞

    简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...

随机推荐

  1. Ubuntu启动sshd服务

    1.Ubuntu主机安装ssh相关服务 openssh-client openssh-server 方法: sudo apt-get install openssh-client openssh-se ...

  2. JavaScript数组求最大值 面试题

    1.JavaScript数组求最大值 (1)方法一:借用math.max (2)方法二:ES6 2.代码 <!DOCTYPE html> <html lang="zh&qu ...

  3. 【BIEE】由于排序顺序不兼容，集合操作失败

    问题描述 使用BIEE数据透视表时,使用了UNION进行数据组合,但是在浏览结果时意外出错了,报错如下截图: 问题分析 原因暂时未知 问题解决 目前使用UNION进行聚合,只需要将UNION修改为UN ...

  4. R 介绍

    R定义:一个能够自由有效地用于统计计算和绘图的语言和环境,它提供了广泛的统计分析和绘图技术. R语言的使用很大程度上可以说是借助各种各种各样R包的辅助,从某种程度上说,运用R的插件来满足不同的需求. ...

  5. Linux下Nagios的安装与配置（转载）

    一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...

  6. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  7. APP开发关于缓存

    1 http://www.cnblogs.com/qianxudetianxia/archive/2012/02/20/2112128.html 1.1 http://blog.csdn.net/ln ...

  8. logstash5安装并实现mariadb数据写入到elasticsearch

    java环境这里默认安装了 ,一般源码安装,这里就不说了 一.安装logstash 安装logstash可以用yum安装,也可以用源码安装: yum安装: 1.导入GPG: rpm --import ...

  9. mariadb在线热备份做主从

    yum install http://www.percona.com/downloads/percona-release/redhat/0.1-3/percona-release-0.1-3.noar ...

  10. vi/vim复制粘贴命

    1. 选定文本块.使用v进入可视模式,移动光标键选定内容. 2.复制的命令是y,即yank(提起) ,常用的命令如下:     y      在使用v模式选定了某一块的时候,复制选定块到缓冲区用:   ...