2018-10-04-Python全栈开发-day62.Iframe，Formdata，Ajax

formdata/ajax上传文件

from django.shortcuts import render,HttpResponse

# Create your views here.


def index(request):
    if request.method=='POST':
        ret = {'status': True, 'message': '....'}
        import json
        return HttpResponse('hello')
    return render(request,'index.html')
def formdata(request):
    data=request.POST
    data1=request.FILES
    print(data1)
    return HttpResponse('heh')

views

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>

    <h6>基于Iframe+Form表单</h6>
    <iframe id="iframe" name="ifra"></iframe>
    <form id="fm" action="/index" method="POST" target="ifra">
        {% csrf_token %}
        <input name="root" value="111111"/>
        <a onclick="AjaxSubmit5()">提交</a>
    </form>

</div>
<h1>formdata上传</h1>

<input id='file22' type="file" name="file">
<button id="button" onclick="func3()">upload</button>

</body>
</html>
<script src="/static/jquery-3.1.1.js"></script>
<script>
    function func3() {
        var data = new FormData();
        data.append('k3', document.getElementById('file22').files[0]);
        $.ajax({
            url: '/formdata',
            type: 'post',
            data: data,
            success: function (arg) {
                console.log(arg)
            },
            processData: false,
            contentType: false
        });
    }

    function AjaxSubmit5() {
        document.getElementById('iframe').onload = reloadIframe;
        document.getElementById('fm').submit();
    }

    function reloadIframe() {
        // this=当前标签
        //console.log(ths);
        //console.log(ths.contentWindow);
        //console.log(ths.contentWindow.document.body.innerHTML);
        //console.log($(ths).contents().find('body').html());
        var content = this.contentWindow.document.body.innerHTML;
        var obj = JSON.parse(content);
        if (obj.status) {
            alert(obj.message);
        }
    }
</script>

html

xml上传

function func4() {
        var data = new FormData();
            data.append('k3',document.getElementById('file22').files[0]);
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4){
                    // 接收完毕服务器返回的数据
                    console.log(xhr.responseText);

                }
            };
            xhr.open('POST','/formdata.html');
            xhr.send(data);
    }


使用formdata来封装文件，进行上传

iframe上传

依旧是iframe和form表单进行结合，然后在form表单中有文件选项

<iframe id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/formdata" method="POST" target="ifra" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" id="file1" name="file1">
        <a onclick="func5()">提交</a>
    </form>

function func5() {
        document.getElementById('iframe1').onload = reloadIframe1;
        document.getElementById('fm1').submit();
        }
    function reloadIframe1() {
        var content = this.contentWindow.document.body.innerHTML;

        console.log(content);
    }

实现预览功能

思路：

　　给input file标签绑定onchange事件，只要有数据提交就发生变化，此时后台可以得到数据，然后再进行返回，

扫描二维码关注公众号，回复： 3466764 查看本文章

　　f=request.post.get('file')

　　然后默默的返回给前端，前端生成一个标签，进行预览，，或者直接返回后台的一个路径，前端再访问路径，，

　　需要在每次删除之前，清楚这个标签内的路径，防止显示多个文件

ajax跨域jsonp

　　想要访问外部地址并且获取数据，在script中不能识别各种数据，所以有巧妙的方法来解决，

　　外部：返回带有函数名的数据，函数名中包裹真正想给的数据，数据作为函数的参数

　　内部：自己创建一个函数，函数名和外部网站发来的相同，在这个函数中，可以对参数进行操作，当然也可以进行显示啦

　　在jquery中已经准备好这种方式：

function func7() {
            var tag = document.createElement('script');
            tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
            document.head.appendChild(tag);
            document.head.removeChild(tag);
        }
    function list(arg) {
        console.log(arg)
        }



提交按钮，  触发一个函数，
在这个函数中 ，新建一个script标签，然后连接到外站，接着删除这个标签。
在此期间，外站返回的数据，已经包裹一个函数，再新建这个函数，运行，就可以得到数据

　　准备好的：

function func888() {
            $.ajax({
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                type: 'POST',
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'func'
            })
        }
    function list(arg) {
        console.log(arg)
        }

2018-10-04-Python全栈开发-day62.Iframe，Formdata，Ajax

猜你喜欢