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 ...
随机推荐
- UVA11796 Dog Distance
题意 PDF 分析 问题可以转化为小问题,即两条狗分别在线段上运动. 然后用相对运动知识可以认为甲不动,乙在线段上运动. 小问题就转化为点到线段的最小或最大距离. 时间复杂度\(O(I \times ...
- TortoiseGit不同分支合并代码
现在有主分支master和分支day2.现在要把day2上的变更合并到主分支master上! 1.首先切换到目标分支master上. 说明当前分支是master分支. 2.在master分支上查看提交 ...
- fn project 试用之后的几个问题的解答
今天试用fnproject 之后自己有些思考,后面继续解决 1. 目前测试是强依赖 dockerhub 的,实际可能不是很方便 2. 如何与k8s .mesos.docker swarm 集成 ...
- FastAdmin 导出 Excel 相关资料收集 (2018-08-14)
FastAdmin 导出 Excel 相关资料收集 导出 Excel 文件时身份证号变成科学计数法怎么办? https://forum.fastadmin.net/thread/1346 姊妹篇 Fa ...
- Ctrl+H 浪潮Raid配置文档
说明 本手册适用于LSI芯片Raid卡 包括但不限于Inspur 2008/2108 Raid卡.LSI 9240/9260/9261/9271 等Raid卡. 不同型号的Raid卡在某些功能上的支持 ...
- 选择排序的JavaScript实现
思想 原址比较的排序算法.即首先找到数结构中的最小值并将其放置在第一位,然后找到第二小的值将其放置在第二位...以此类推. 代码 function selectionSort(arr) { const ...
- Java基础知识复习(二)
Java 重写(Override)与重载(Overload) 重写 是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变,属于编译时多态.即外壳不变,核心重写! 重写的好处在于子 ...
- 控制台执行CI方法
执行方法:进入到ci放入口文件目录 执行 php index.php 控制器 方法 #php index.php home index
- php.ini修改php上传文件大小限制
打开php.ini,首先找到file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就 ...
- 关于 Mybatis的原生连接池 和 DBCP 连接池
一 遇到的问题: 项目用的play框架,数据库DB2, 持久化框架是Mybatis, 连接池用的是Mybatis原生的,遇到的问题是:有时候抛出如下异常: play.api.UnexpectedEx ...