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( "上传成功!" )
|
转载于:https://www.cnblogs.com/hanbowen/p/9567448.html
Django框架 之 Form表单和Ajax上传文件相关推荐
- [html] Form表单是怎么上传文件的?你了解它的原理吗?
[html] Form表单是怎么上传文件的?你了解它的原理吗? 简单来说就是把文件转化成字节流,然后使用http进行传输,后端接受后在把二进制转化成原先的文件格式.在HTML表单中,可以上传文件的唯一 ...
- Ajax传Form表单,包括上传文件
2019独角兽企业重金招聘Python工程师标准>>> 被这个问题困扰了好久...真是醉了 借用了jquery 的插件,jquery-form.js,链接:http://jquery ...
- 获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用 首先文件的上传需要一个type=file的input.它的意义就是上 ...
- html post请求 渲染,FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
- 一、PHP基础——表单传值、上传文件
表单传值 概念: 表单传值即浏览器通过表单元素将用户的选择或者输入的数据提交给后台服务器语言. 为什么使用表单传值? 动态网站(Web2.0)的特点就是后台根据用户的需求定制数据,所谓的"需 ...
- FastAPI从入门到实战(11)——表单请求与上传文件
本文主要记录表单的数据请求以及上传不同大小的文件.上传多个文件.获取文件信息等相关内容. 表单请求 @app07.post("/stu07/form") def stu07_for ...
- python表单管理系统_python3开发进阶-Django框架的Form表单系统和基本操作
{% csrf_token %} 用户名 密码 {{ error_msg }}
- jquery表单ajax json数据,jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
最新文章
- 网站建设ASP中UTF-8与GB2312编码转换乱码问题的解决方法
- hive substr函数_数据分析工具篇——HQL函数及逻辑
- 数据库元数据数据字典查询_11_列出数据库里含有自增的字段
- Online ML那点事-!
- 优化你的DiscuzNT3.0,让它跑起来(4)asp.net 缓存和死锁
- php在命令行下显示进度条,PHP命令行进度条
- 20200827:2020力扣第33周双周赛题解
- java.lang.IllegalStateException: Unable to read meta-data for class 问题的解决
- 计算机教室管理使用规则,多媒体教室使用管理细则
- 遭遇 kapjazy.dll,yhpri.dll,WinSys64.Sys,nwiztlbu.exe,myplayer.com 等1
- VS2003安装包和方法
- 使用unity制作的一款生存类游戏demo(一)
- Spark技能成长,CSDN就go了!
- 【ESD专题】3.ESD防护器件(TVS管的原理和选型)
- 如何将word文档内容在网页显示方法
- 第一讲:计算机基本结构
- useradd与adduser(更全面)创建用户命令 和 让用户拥有root权限
- Linux 运维之路001
- ata职业技能评价证书考出来有啥用?
- 回朔法象棋马步问题java编程,任意六十个点连通图的货郎担回路和马步哈密顿圈...
热门文章
- 利用screen和nohup让Linux服务器后台运行程序
- 文本获取和搜索引擎中的反馈模型
- php如何让B链接在当前页面打,javascript - 如何实现点击链接 A 弹出窗口 X,点击链接 B 继续在弹出窗口 X (刷新)打开?...
- 命令行参数的作用_Rasa 聊天机器人专栏(二):命令行界面
- 文科生必备计算机知识点,文科生计算机知识点调查报告.docx
- [Perl系列—] 1. 清空目录及目录中的所有文件
- IE、FireFox、Opera三种浏览器Document对象的方法对比
- java语音播放事例
- mysql导出excel出乱码_Mysql中文乱码以及导出为sql语句和Excel问题解决方法[图文]...
- mysql的dockerfile_dockerfile构建mysql镜像