python周报第二十一周

0.本周知识点预览

Django Form文件上传
原生Ajax
Ajax 文件上传
iframe 文件上传

1.Django Form文件上传

前端代码：

{#        Form方式上传文件,注意method是POST,enctype的设置必不可少,不然只能传个文件名,不能传文件内容#}
    <form action="/upload/" method="POST" enctype="multipart/form-data">
        <input type="text" name="user"/>
        <input type="file" name="img"/>
        <input type="submit" name="submit"/>
    </form>

后端代码：

views.py

def upload(request):
    if request.method == "POST":
        user = request.POST.get("user")
        img = request.FILES.get("img")
        file_path = os.path.join("static", img.name)
        f = open(file_path, "wb")
　　　　　##chunks方法是可迭代的，可以先看img的属性，然后找到类，找到该方法
        for line in img.chunks():
            f.write(line)
        f.close()
    return render(request, "upload.html")

2.原生Ajax

1.GET

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="abc"/>
    <input type="button" value="ajax提交" onclick="ajax1();"/>
    <script>
{#        get方式#}
        function ajax1(){
{#            初始化一个XMLHttpRequest对象,原生Ajax就是这么实现的#}
            var a = new XMLHttpRequest();
{#            定义一个回调函数#}
{#            当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。#}
            a.onreadystatechange = function () {
{#                0: 请求未初始化,1: 服务器连接已建立,2: 请求已接收,3: 请求处理中,4: 请求已完成，且响应已就绪#}
                if(a.readyState == 4){
                    console.log(a.responseText)
                }
            };
{#            open方法,定义请求类型,get,post等,第二个是url和请求参数#}
            a.open("GET", "/ajax_test/?p=123");
{#            send方法发送Ajax请求#}
            a.send();
        }

后端代码接收GET请求的p参数:

def ajax(request):

    return render(request, "ajax.html")

def ajax_test(request):
    a = request.GET.get("p")
    # a = request.POST.get("p")
    print(a)
    return HttpResponse("ok")

2.POST

前端代码：

        function ajax1(){
            var a = new XMLHttpRequest();
            a.onreadystatechange = function () {
                if(a.readyState == 4){
                    console.log(a.responseText)
                }
            };
{#            POST的时候无需写参数,只写url后边要带杠,#}
            a.open("POST", "/ajax_test/");
{#            需要设置POST请求头#}
            a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            a.send("p=123");
        }

后端代码：

def ajax(request):

    return render(request, "ajax.html")

def ajax_test(request):
    # a = request.GET.get("p")
    a = request.POST.get("p")
    print(a)
    return HttpResponse("ok")

3.FORM

前端代码：

        function ajax1(){
            var a = new XMLHttpRequest();
            a.onreadystatechange = function () {
                if(a.readyState == 4){
                    console.log(a.responseText)
                }
            };
            a.open("POST", "/ajax_test/");
{#            这里不需要设置POST请求头了#}
            a.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
{#            这里是重点,新建个form对象#}
            var form = new FormData;
{#            把需要发送的数据追加到form里#}
            form.append("p", "123");
{#            直接发送form对象#}
            a.send(form);
        }

3.Ajax文件上传

1.Form对象上传

前端代码:

        Ajax方式上传文件
        <form action="/upload/" method="POST" enctype="multipart/form-data">
            <input type="text" name="user" id="user"/>
            <input type="file" name="img" id="img" value="ajax上传"/>
        </form>
        <a style="display: inline-block; background-color: red; color: bisque; cursor: pointer;" onclick="Ajax1();">XMLHttpRequest</a>
        <script>
            function Ajax1(){
{#                新建一个form对象#}
{#                把数据添加到form对象中#}
                var form = new FormData();
                form.append("user", document.getElementById("user").value);
{#                fileobj 是一个文件对象#}
                var fileobj = document.getElementById("img").files[0];
                form.append("img", fileobj);
{#                新建一个Ajax对象用来上传文件#}
                var aa = new XMLHttpRequest();
{#                回调函数,并判断哪种状态在打印数据,4代表数据完全传输完#}
                aa.onreadystatechange = function () {
                if(aa.readyState == 4){
                    console.log(aa.responseText)
                }
            };
{#                POST的方式传输,直接send一个form对象#}
                aa.open("post", "/upload/", true);
                aa.send(form);
            }
        </script>

2.Iframe 上传文件

{#        iframe方式上传文件,Iframe可以看做是一个能向后端传输数据的通道,可以把form提交到iframe里#}
        <script src="/static/js/jquery-1.12.4.js"></script>
        form提交表单通过iframe传到后台,把form的提交地址改成iframe的name属性
        <iframe id="my_iframe" name="my_iframe" style="display: none;"></iframe>
        <form id="fo" action="/upload/" method="POST" enctype="multipart/form-data">
            user测试页面是否刷新
            <input type="text" name="user" id="user"/>
            onchange事件是说input标签发生变化之后就会执行函数
            <input type="file" name="img" id="img" onchange="uploadFile3();"/>
        </form>
            用来预览上传的图片
        <div id="containter"></div>
        <script>
            function uploadFile3(){
                $("#containter").find("img").remove();
                onload等待iframe全部加载之后执行函数
                document.getElementById("my_iframe").onload = callback;
                //这个target加的是iframe的name属性
                document.getElementById("fo").target = "my_iframe";
                //DOM方式上传表单
                document.getElementById("fo").submit();
            }
            function callback(){
                //因为iframe嵌套有个#ducoment,所以要加content属性
                var text = $("#my_iframe").contents().find("body").text();
                var json_data = JSON.parse(text);
                console.log(json_data);
                if (json_data.status){
                    //上传成功
                    //预览,创建img标签,src属性指向上传后的服务器路径
                    var tag = document.createElement("img");
                    //拼接预览路径
                    tag.src = "/" + json_data.data;
                    tag.className = "img";
                    $("#containter").append(tag);
                }
                else {
                    alert(json_data.error);
                }
            }
        </script>