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 ...
随机推荐
- HTML中id与name的用法
可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢? 而同样我们也可以得到最经典的答案:ID就像是一个人的身份证号码,而Name就像是他的名字 ...
- 圆方树总结 [uoj30]Tourists
圆方树总结 所谓圆方树就是把一张图变成一棵树. 怎么变啊qaq 这里盗一张图 简单来说就是给每一个点双新建一个点,然后连向这个点双中的每一个点.特殊的,把两个点互相连通的也视作一个点双. 我们把原来就 ...
- c#模拟键盘输入
System.Windows.Forms.SendKeys.SendWait("j");
- 列表推导式,两个for循环的例子
[a for a in alist for b in blist if a>b] for i in alist,blist: print(i) >> alist[] >> ...
- java流类,快速统计出字符次数+++
总结:学会给一个合适的命名,不要总是abc..虽然简单,但是不容易看懂,和方便去理解 package com.aini; import java.io.File; import java.io.Fil ...
- c# 各种tips
1.lock 类似于 java中的synchronized,对对象或代码块加上互斥锁. 2.c#中的lambda表达式, ForEach(x => f(n)) 3.c# 中的 something ...
- 爬了个爬(三)Scrapy框架
参考博客:武Sir Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 ...
- 网站漏洞扫描并自动化工具-XAttacker
注:该脚本根据网站的cms类型来扫描,所以推荐用来扫外国的站 运行脚本 ┌─[root@sch01ar]─[/sch01ar/XAttacker] └──╼ #perl XAttacker.pl 询问 ...
- temp3
- DRF之注册器响应器分页器
概要 url注册器 响应器 分页器 url注册器 通过DRF的视图组件,数据接口逻辑被我们优化到最剩下一个类,接下来,我们使用DRF的url控制器来帮助我们自动生成url,使用步骤如下: 第一步:导入 ...