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的最大优点就是我们可以异步上传一个二进制文件.

所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

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上传文件的更多相关文章

  1. 通过Ajax提交form表单来提交上传文件

    Ajax 提交form方式可以将form表单序列化 然后将数据通过data提交至后台,例如: $.ajax({      url : "http://localhost:8080/" ...

  2. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  3. 第三百一十一节,Django框架,Form表单验证

    第三百一十一节,Django框架,Form表单验证 表单提交 html <!DOCTYPE html> <html lang="en"> <head& ...

  4. django项目中form表单和ajax的文件上传功能。

    form表单文件上传 路由 # from表单上传 path('formupload/',apply.formupload,name='formupload/'), 方法 # form表单文件上传 de ...

  5. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  6. php使用jquery Form ajax 提交表单,并上传文件

    在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交.   一.jquery.form.js下载地址 ...

  7. django系列6--Ajax05 请求头ContentType, 使用Ajax上传文件

    一.请求头ContentType ContentType指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的 POST ...

  8. java 模拟表单方式提交上传文件

    /** * 模拟form表单的形式 ,上传文件 以输出流的形式把文件写入到url中,然后用输入流来获取url的响应 * * @param url 请求地址 form表单url地址 * @param f ...

  9. FastAPI框架入门 基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置

    安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...

随机推荐

  1. UVA11796 Dog Distance

    题意 PDF 分析 问题可以转化为小问题,即两条狗分别在线段上运动. 然后用相对运动知识可以认为甲不动,乙在线段上运动. 小问题就转化为点到线段的最小或最大距离. 时间复杂度\(O(I \times ...

  2. TortoiseGit不同分支合并代码

    现在有主分支master和分支day2.现在要把day2上的变更合并到主分支master上! 1.首先切换到目标分支master上. 说明当前分支是master分支. 2.在master分支上查看提交 ...

  3. fn project 试用之后的几个问题的解答

    今天试用fnproject  之后自己有些思考,后面继续解决   1. 目前测试是强依赖 dockerhub 的,实际可能不是很方便 2. 如何与k8s .mesos.docker swarm  集成 ...

  4. FastAdmin 导出 Excel 相关资料收集 (2018-08-14)

    FastAdmin 导出 Excel 相关资料收集 导出 Excel 文件时身份证号变成科学计数法怎么办? https://forum.fastadmin.net/thread/1346 姊妹篇 Fa ...

  5. Ctrl+H 浪潮Raid配置文档

    说明 本手册适用于LSI芯片Raid卡 包括但不限于Inspur 2008/2108 Raid卡.LSI 9240/9260/9261/9271 等Raid卡. 不同型号的Raid卡在某些功能上的支持 ...

  6. 选择排序的JavaScript实现

    思想 原址比较的排序算法.即首先找到数结构中的最小值并将其放置在第一位,然后找到第二小的值将其放置在第二位...以此类推. 代码 function selectionSort(arr) { const ...

  7. Java基础知识复习(二)

    Java 重写(Override)与重载(Overload) 重写 是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变,属于编译时多态.即外壳不变,核心重写! 重写的好处在于子 ...

  8. 控制台执行CI方法

    执行方法:进入到ci放入口文件目录 执行 php index.php 控制器 方法 #php index.php home index

  9. php.ini修改php上传文件大小限制

    打开php.ini,首先找到file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就 ...

  10. 关于 Mybatis的原生连接池 和 DBCP 连接池

    一 遇到的问题:  项目用的play框架,数据库DB2, 持久化框架是Mybatis, 连接池用的是Mybatis原生的,遇到的问题是:有时候抛出如下异常: play.api.UnexpectedEx ...