码迷,mamicode.com
首页 > Web开发 > 详细

Django-Ajax进阶

时间:2017-12-05 21:50:34      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:word   form表单   django   target   upload   style   for   进制   new   

Ajax上传文件 

1、form表单上传文件

文件和其他的数据类型不一样,是一个二进制的形式

Form上传文件的时候切记要加上:enctype="multipart/form-data"

formupload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<form action="/formupload/" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>姓名:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="password"></p>
    <p>头像:<input type="file" name="file"></p>
    <p><input type="submit" value="提交"></p>
</form>

</body>
</html>

view.py

def formupload(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        # file = request.FILES   #拿到的是一个句柄
        file_obj = request.FILES.get("file")
        print(file_obj,file_obj.name)
        print(type(file_obj),type(file_obj.name))   #<class ‘django.core.files.uploadedfile.InMemoryUploadedFile‘>   <class ‘str‘>
        with open(file_obj.name,"wb") as f:
            for i in file_obj:
                f.write(i)
        return HttpResponse("上传成功...")
    return render(request,"formupload.html")

2Ajax上传文件(利用FormData

FormData是什么呢?

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

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

要是使用FormData一定要加上:

一定要加上:

       contentType:false 
  processDate:false #不做预处理

ajaxupload.html

<h3>Ajax上传文件</h3>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<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>

views.py

def index(request):
    return render(request,"index.html")

def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
return HttpResponse("上传成功!")

3、伪造Ajax上传文件

iframe标签

<iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

示例:

<iframe src="http://www.baidu.com" width="1000px" height="600px"></iframe>

iframe+form

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquerycookie/1.4.1/jquery.cookie.js"></script>
<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>

views

def index(request):
 
    return render(request,"index.html")
 
def upload_file(request):
    print("FILES:",request.FILES)
    print("POST:",request.POST)
return HttpResponse("上传成功!")

 

Django-Ajax进阶

标签:word   form表单   django   target   upload   style   for   进制   new   

原文地址:http://www.cnblogs.com/qiangyuge/p/7989533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!