Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件
浏览目录
Form表单上传文件
Ajax上传文件
伪造Ajax上传文件
Form表单上传文件
html
1
2
3
4
5
6
7
|
< h3 >form表单上传文件</ h3 > < form action="/upload_file/" method="post" enctype="multipart/form-data"> < p >< input type="file" name="upload_file_form"></ p > < input type="submit"> </ form > |
注意:必须添加enctype="multipart/form-data属性。
view
1
2
3
4
5
6
7
8
9
|
def index(request): return render(request, "index.html" ) def upload_file(request): print ( "FILES:" ,request.FILES) print ( "POST:" ,request.POST) return HttpResponse( "上传成功!" ) |
Ajax上传文件
什么是FormData
XMLHttpRequest Level 2添加了一个新的接口FormData
.利用FormData对象
,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()
方法来异步的提交这个"表单".比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件.
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
< h3 >Ajax上传文件</ h3 > < p >< input type="text" name="username" id="username" placeholder="username"></ p > < p >< input type="file" name="upload_file_ajax" id="upload_file_ajax"></ p > < button id="upload_button">提交</ button > {#注意button标签不要用在form表单中使用#} < script > $("#upload_button").click(function(){ var username=$("#username").val(); var upload_file=$("#upload_file_ajax")[0].files[0]; var formData=new FormData(); formData.append("username",username); formData.append("upload_file_ajax",upload_file); $.ajax({ url:"/upload_file/", type:"POST", data:formData, contentType:false, processData:false, success:function(){ alert("上传成功!") } }); }) </ script > |
注意:contentType:false, processData:false, 必不可少。
views.py
1
2
3
4
5
6
7
8
9
|
def index(request): return render(request, "index.html" ) def upload_file(request): print ( "FILES:" ,request.FILES) print ( "POST:" ,request.POST) return HttpResponse( "上传成功!" ) |
伪造Ajax上传文件
iframe标签
<iframe> 标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。
示例:
1
|
< iframe src="http://www.baidu.com" width="1000px" height="600px"></ iframe >< em id="__mceDel" style=" font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"> </ em > |
iframe+form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
< h3 >伪造Ajax上传文件</ h3 > < form action="/upload_file/" method="post" id="form2" target="ifr" enctype="multipart/form-data"> < p > < iframe name="ifr" id="ifr"></ iframe ></ p > < p >< input type="file" name="upload_file"></ p > < p >< input type="text" name="user"></ p > < input type="button" value="提交" id="submitBtn"> </ form > < script > $("#submitBtn").click(function(){ $("#ifr").load(iframeLoaded); $("#form2").submit(); }); function iframeLoaded(){ alert(123) } </ script >< em id="__mceDel" style=" font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px;"> </ em > |
views
1
2
3
4
5
6
7
8
|
def index(request): return render(request, "index.html" ) def upload_file(request): print ( "FILES:" ,request.FILES) print ( "POST:" ,request.POST) return HttpResponse( "上传成功!" ) |
Django框架 之 Form表单和Ajax上传文件的更多相关文章
- 通过Ajax提交form表单来提交上传文件
Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如: $.ajax({ url : "http://localhost:8080/" ...
- $_FILES参数详解及简单<form>表单无刷新上传文件
$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...
- 第三百一十一节,Django框架,Form表单验证
第三百一十一节,Django框架,Form表单验证 表单提交 html <!DOCTYPE html> <html lang="en"> <head& ...
- django项目中form表单和ajax的文件上传功能。
form表单文件上传 路由 # from表单上传 path('formupload/',apply.formupload,name='formupload/'), 方法 # form表单文件上传 de ...
- 4 django系列之HTML通过form标签来同时提交表单内容与上传文件
preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件
一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...
- java 模拟表单方式提交上传文件
/** * 模拟form表单的形式 ,上传文件 以输出流的形式把文件写入到url中,然后用输入流来获取url的响应 * * @param url 请求地址 form表单url地址 * @param f ...
- FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
随机推荐
- 剑指offer-第三章高质量代码(树的子结构)
题目:输入两个二叉树A和B,判断B是不是A的子结构. 思路:遍历A树找到B树的根节点,然后再判断左右子树是否相同.不相同再往下找.重复改过程. 子结构的描述如下图所示: C++代码: #include ...
- 【sqlite】基础知识
最近做一个数控系统的项目,winCE嵌入式操作系统+.Net Compact Framework环境+VS2008开发平台,开发的设备程序部署到winCE系统下的设备中运行.. 个年头,SQLite也 ...
- C# 报警 控制蜂鸣器发声
在C#中可以通过以下四种方式来实现蜂鸣或者报警,播放声音之类的功能.XP下对蜂鸣有用,win7下请接上扬声器. 1). Beep的报警实现 [c-sharp] view plaincopy / ...
- svn服务器端回退版本 (转)
由于误操作,不小心将错误的代码提交到了svn上,于是想在服务器上撤销本次提交,经过尝试,发现进行以下步骤的操作即可彻底删除本次提交: 1.首先找到本次提交后生成的版本号,例如为r224. 2.登录到s ...
- SQL语言分为五大类
SQL语言分为五大类:DDL(数据定义语言) - Create.Alter.Drop 这些语句自动提交,无需用Commit提交.DQL(数据查询语言) - Select 查询语句不存在提交问题.DML ...
- C#去除数组空格
static void Main(string[] args) { "}; Console.WriteLine("输出带有空字符串的数组:"); foreach (str ...
- 【转】 Pro Android学习笔记(九六):AsyncTask(5):横竖屏切换问题
目录(?)[-] 横竖屏切换的问题 WeakReference 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.net/flow ...
- PTA 最大子列和问题(10 分)
最大子列和问题(10 分) 给定K个整数组成的序列{ N1, N2, ..., NK },“连续子列”被定义为{ Ni, Ni+1, ..., Nj },其中 1≤ ...
- HTML注册页面验证注册信息
在这里主要介绍两种验证方式,一种是点击注册按钮后会提示最上方的出错位置,弹出窗口提示格式不对.另一种是利用鼠标事件,在鼠标进行不同操作时会有不同的click事件. 这两种都是利用javascript, ...
- PHP大小写:函数名和类名不区分,变量名区分
PHP对大小写敏感问题的处理比较乱,写代码时可能偶尔出问题,所以这里总结一下. 但我不是鼓励大家去用这些规则.推荐大家始终坚持“大小写敏感”,遵循统一的代码规范. 1. 变量名区分大小写 <?p ...