前端数据/文件提交的三种方式

一、XMLHttpRequest+FormData

　　前端页面

　　<div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    </div>    

    <input type="file" id="img" />
    <input type="button" value="提交XML" onclick="UploadXML()" />
    <input type="button" value="提交JQ" onclick="Uploadjq()" />
    <script src="/static/jquery-2.1.4.min.js"></script>
    <script>
        function UploadXML() {
            var dic = new FormData();
            dic.append('user', 'v1');
            dic.append('fafafa', document.getElementById('img').files[0]);

            var xml = new XMLHttpRequest();
            xml.open('post', '/upload.html', true);
            xml.onreadystatechange = function () {
                if(xml.readyState == 4){
                    var obj = JSON.parse(xml.responseText);
                    if(obj.status){
                        var img = document.createElement('img');
                        img.src = "/" + obj.path;
                        document.getElementById("imgs").appendChild(img);
                    }
                }
            };
            xml.send(dic);
        }

　　后台逻辑

def upload(request):
    import os
    if request.method == 'GET':
        img_list = models.Img.objects.all()
        return render(request,'upload.html',{'img_list': img_list})
    elif request.method == "POST":
        obj = request.FILES.get('img')
        file_path = os.path.join('static','upload',obj.name)
　　　　 with open(file_path,"wb“) as f:
     for chunk in obj.chunks():
            f.write(chunk) //写文件
        f.close()
        models.Img.objects.create(path=file_path)
        ret = {'status': True, 'path': file_path}
        return HttpResponse(json.dumps(ret))

二、jQuery+FormData

　　前端代码

<div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
</div>    
<input type="file" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
　　function Uploadjq() {
            var dic = new FormData();
            dic.append('fafafa', document.getElementById('img').files[0]);

            $.ajax({
                url: '/upload.html',
                type: 'POST',
                data: dic,
                processData: false,  // tell jQuery not to process the data
                contentType: false,  // tell jQuery not to set contentType
                dataType: 'JSON',
                success: function (arg) {
                    if (arg.status){
                        var img = document.createElement('img');
                        img.src = "/" + arg.path;
                        $('#imgs').append(img);
                    }
                }
            })

        }
</script>

　　后台逻辑

def upload(request):
    import os
    if request.method == 'GET':
        img_list = models.Img.objects.all()
        return render(request,'upload.html',{'img_list': img_list})
    elif request.method == "POST":
        obj = request.FILES.get('fafafa') # 获取文件对象方式

        file_path = os.path.join('static','upload',obj.name)
　　　　　with open(file_path,"wb") as f:
        　　for chunk in obj.chunks():
            　　f.write(chunk)
        
        models.Img.objects.create(path=file_path)
        ret = {'status': True, 'path': file_path}
        return HttpResponse(json.dumps(ret))

三、基于form表单+iframe实现伪造ajax请求

　　前端代码

<h1>测试Iframe功能</h1>
    <input type="text" id="url" />
    <input type="button" value="点我" onclick="iframeChange();" />
    <iframe  id="ifr" src=""></iframe>
    <hr/>
    <h1>基于iframe实现form提交</h1>
    <form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
        <iframe style="display: none"  id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
        <input type="text" name="user" />
        <input type="file" name="fafafa" />
        <input type="submit" />
    </form>
    <h1>图片列表</h1>
    <div class="container" id="imgs">
        {% for img in img_list %}
            <img src="/{{ img.path }}">
        {% endfor %}
    </div> 


<script>
　　function  iframeChange() {
            var url = $('#url').val();
            $('#ifr').attr('src', url);
        }

        function loadIframe() {
            console.log(1);
            // 获取iframe内部的内容
            var str_json = $('#iframe_1').contents().find('body').text();
            var obj = JSON.parse(str_json);
            if (obj.status){
                var img = document.createElement('img');
                img.src = "/" + obj.path;
                $('#imgs').append(img);
            }
        }
</script>

　　后台逻辑

def upload(request):
    import os
    if request.method == 'GET':
        img_list = models.Img.objects.all()
        return render(request,'upload.html',{'img_list': img_list})
    elif request.method == "POST":
        obj = request.FILES.get('fafafa') # 获取文件对象方式

        file_path = os.path.join('static','upload',obj.name)
　　　　　with open(file_path,"wb") as f:
        　　for chunk in obj.chunks():
            　　f.write(chunk)
        
        models.Img.objects.create(path=file_path)
        ret = {'status': True, 'path': file_path}
        return HttpResponse(json.dumps(ret))