正文

Django 基于Ajax & form 简单实现文件上传

IP云
IP云V管理员/3 阅读
07/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前端实现

<!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&num;过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable&comma;ICollection&comma;IList接口问题 不吹不擂，你想要的Python面试都在这里了【315&plus;道题】 基于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&period;js实现多文件上传和上传进度条的显示

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. win2003&plus;sql2005配置

    1.安装win2003+sp1 2.安装IIS: a.启用Asp支持(2003 默认安装不安装IIS 6 ,需另外安装.安装完IIS 6,需单独开启ASP支持) 控制面板 -> 管理工具 -&g ...

  2. 哈哈：sqlserver2008附加数据库时操作系统错误5&lpar;拒绝访问&rpar;错误5012的解决办法

    老师说:无论干什么,出错了,先大笑三声.如果人多了,在心里也要大笑三声.哈哈哈!!! 刚刚重装系统完后,然后想学习.自己去安装sqlserver2008数据库,完之后想附加之前的数据库.可是当我一点确 ...

  3. Partition算法剖析

    博文链接:http://haoyuanliu.github.io/2016/12/18/Partition%E7%AE%97%E6%B3%95%E5%89%96%E6%9E%90/ 对,我是来骗访问量 ...

  4. linux命令之ls命令的简明讲解

    我详细熟悉linux操作系统的同学对ls命令是再熟悉不过了因为我们通常使用该命令查看某个目录下的文件 其命令形式是:ls [选项] 目录或者文件 本文中主要讲解两个最常用的选项: -l:用于列出文件的 ...

  5. ubuntu12&period;04 安装中文输入法

    1.  安装输入法的第一步,是安装语言包.我们选择System Settings-->Language Support-->Install/Remove Languages 选择中文 2. ...

  6. &lbrack;转载&rsqb;linux修改open files数

    概要:linux系统默认open files数目为1024, 有时应用程序会报Too many open files的错误,是因为open files 数目不够.这就需要修改ulimit和file-m ...

  7. 【一天一道LeetCode】&num;54&period; Spiral Matrix

    一天一道LeetCode系列 (一)题目 Given a matrix of m x n elements (m rows, n columns), return all elements of th ...

  8. 转 Mac 下自带的中文输入法不显示汉字提示问题

    原文 https://blog.csdn.net/moxi_wang/article/details/50721326 当时聊天的时候不知道那个手指头按错了什么键 导致Mac自带的中文输入法不能提示显 ...

  9. AngularJS资源合集&lbrack;备忘&rsqb;【申明&colon;来源于网络】

    AngularJS资源合集[备忘][申明:来源于网络] 地址:http://blog.csdn.net/allgis/article/details/44646597

  10. FIFO设计中的深度计算【zz】

    FIFO设计中的深度计算: 写时钟频率 w_clk, 读时钟频率 r_clk, 写时钟周期里,每B个时钟周期会有A个数据写入FIFO: 读时钟周期里,每Y个时钟周期会有X个数据读出FIFO: 则,FI ...