伪Ajax上传文件_伪上传-CSDN博客

本文链接：https://blog.csdn.net/maidou931019/article/details/74615724

伪Ajax上传
- 之前两种 (JQuery Ajax&原生Ajax上传文件) 都要依赖FormData对象进行操作，虽然好用，但兼容性稍微差点，在html5之后提出的对象，现在主流的浏览器都支持，ie10以上才能用，其他更老的浏览器就不支持FormData对象，这时候就要用伪造Ajax上传，兼容性好。

# views.py
def upload(request):
    if request.method == 'GET':
        return render(request,'upload.html')
    else:
        print(request.POST,request.FILES)
        file_obj = request.FILES.get('fafafa')
        import os
        file_path = os.path.join('static',file_obj.name)
        with open(file_path,'wb') as f:
            for chunk in file_obj.chunks():
                f.write(chunk)
        return HttpResponse(file_path)


# upload.html

<body>

    <h3>伪 Ajax上传文件</h3>
        <form id="f1" action="/upload/" target="ifr" method="post" enctype="multipart/form-data">
        <iframe id="ifr" name="ifr" style="display: none"></iframe>
        <input type="file" name="fafafa" />
        <a onclick="upload3();">提交</a>
    </form>
    <div id="content3"></div>



    <script src="/static/jquery-3.2.1.js"></script>
        function upload3() {
        document.getElementById('ifr').onload = loadIframe;
        document.getElementById('f1').submit();

    }
        function loadIframe() {
        var content =  document.getElementById('ifr').contentWindow.document.body.innerText;
        alert(content);
        var tag = document.createElement('img');
        tag.src = '/' + content;
        document.getElementById('content').appendChild(tag)

    }

</body>