Django 基于Ajax & form 简单实现文件上传
前端实现
<!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 简单实现文件上传的更多相关文章
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- Django 实现简单的文件上传
今天分享一下Django实现的简单的文件上传的小例子. 步骤 创建Django项目,创建Django应用 设计模型 处理urls.py 以及views.py 设计模板,设计表单 运行项目,查看数据库 ...
- 基于uploadify.js实现多文件上传和上传进度条的显示
uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制.文件类型.是否自动上传等属性,可以显示上传的进度条.官网地址是http://www.uploadify. ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- 使用jsp/servlet简单实现文件上传与下载
使用JSP/Servlet简单实现文件上传与下载 通过学习黑马jsp教学视频,我学会了使用jsp与servlet简单地实现web的文件的上传与下载,首先感谢黑马.好了,下面来简单了解如何通过使用 ...
- ajax方式提交带文件上传的表单,上传后不跳转
ajax方式提交带文件上传的表单 一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦.基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,在表单数 ...
- nodejs 实现简单的文件上传功能
首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...
- DVWA靶机--简单的文件上传漏洞
简单的文件上传漏洞(靶机安全级别:low) 事先准备好一句话木马,密码为pass 上传一句话木马,显示上传路径(一般网站是不会显示路径的,这里靶机为了方便你测试漏洞,直接显示出了路径: ../../h ...
随机推荐
- Elasticsearch教程(二),IK分词器安装
elasticsearch-analysis-ik 是一款中文的分词插件,支持自定义词库,也有默认的词库. 开始安装. 1.下载 下载地址为:https://github.com/medcl/ela ...
- WEB接口测试之Jmeter接口测试自动化 (二)(数据分离)
转载: http://www.cnblogs.com/chengtch/p/6105231.html 通过逐个录入的方式,好不容易将需要测试几十个接口的300多个测试用例录入sampler-ht ...
- HNU11376:Golf Bot
Problem description Input The first line has one integer: N, the number of different distances the G ...
- SQLiteDatabase中query、insert、update、delete方法参数说明
1.SQLiteDataBase对象的query()接口: public Cursor query (String table, String[] columns, String selection, ...
- 倍福TwinCAT(贝福Beckhoff)基础教程5.1 TwinCAT-4 获取本机名称和网卡名称
使用命令FB_GetHostName来获取本机名称,返回的是一个字符串 使用命令FB_GetAdaptersInfo获取网卡信息(注意采集到的是一个非常复杂的类型,本身是一个数组,数组的每个元素又 ...
- C1:工厂模式 Factory
最常用的实例化对象模式,用工厂方法替代了实例化对象. 应用场景:A.一个类的子类经常面临着剧烈变化,但却拥有较稳定的接口,或者说拥有相同的接口.工厂方法定义一个用于创建对象的接口,让子类来决定创建那个 ...
- 跟踪运行时错误 vue
如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置).利用这个钩子函数来配合错误跟踪服务是个不错的主意.比如 Sentry,它为 ...
- Android Shader 颜色、图像渲染 paint.setXfermode
Shader Shader是一个基类,表示在绘制期间颜色的水平跨度 它的子类被嵌入在Paint中使用,调用paint.setShader(shader). 除Bitmap外的其他对象,使用该Paint ...
- Effective C++ Item 25 考虑写出一个不抛异常的swap函数
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 经验:当std::swap对你的类型效率不高时,提供一个swap成员函数,并确定这个函数不抛 ...
- 读EXCEL
import xlrdbook=xlrd.open_workbook('app_student.xls')sheet=book.sheet_by_index(0)#根据(索引)顺序获取到sheet页# ...