Django之ajax文件上传的两种方式和ifname上传文件【交互篇六】

上一篇：Django之Ajax【交互篇五】点击跳转
目录篇：Django之前后端交互篇目录 点击跳转
下一篇：Django之JSONP跨域请求【交互篇七】点击跳转

目录

• 前端文件上传几种方式
• Ajax上传文件两种方式和iframe上传方式

前端文件上传几种方式

文件上传四种方式
         - Form提交    跳转：https://blog.csdn.net/Burgess_zheng/article/details/86539836
         - Ajax上传文件两种方式（1.原生ajax（XMLHttpRequest()对象方式），2.jquery ajax方式）
         - iframe上传文件
时机：如果发送的是【文件】-> iframe-->jQuery(FormData)-->XMLHttpRequest(FormData)，

Ajax上传文件两种方式和iframe上传方式

实战Django之ajax两种上传方式和iframe上传方式： https://blog.csdn.net/Burgess_zheng/article/details/86558918

对ajax（jQuery,原生XMLhttpRequest）、iframe、CSRF不熟悉请先跳转到如下文章:
    Django之Ajax(jQuery)and原生Ajax(XMLhttpRequest)）【交互篇五】 https://blog.csdn.net/Burgess_zheng/article/details/86548396
    实战Django之Ajax（jQuery）前后端交互 https://blog.csdn.net/Burgess_zheng/article/details/86548407
    实战Django之iframe介绍和交互 https://blog.csdn.net/Burgess_zheng/article/details/86558181
    Django之CSRF XSS原理解析【交互篇四】https://blog.csdn.net/Burgess_zheng/article/details/86548425

 

 

后端

def upload(request):
    if request.method == "GET":
        return render(request, 'upload.html')
    elif request.method == "POST":
        username = request.POST.get('username')
        file_obj = request.FILES.get('fafafa')
        import os
        img_path = os.path.join('static/imgs/',file_obj.name)
            #手动在static下创建一个imags目录
            #其实这里我们可以进行判断该imgs目录是否存在，不存在就创建
        with open(img_path,'wb') as f: #文件保存到指定路径
            for item in  file_obj.chunks():
                f.write(item)

        ret = {'code': True , 'data': img_path} #文件路径返回给前端
        import json
        return HttpResponse(json.dumps(ret))

前端

1.原生ajax（XMLHttpRequest()对象方式）

    
    



    {{ csrf_token }}
    
    
    
    
    

2.jquery ajax方式

    
    



    {{ csrf_token }}
    
    
    
    
    

3.iframe方式

    
    



    

        {% csrf_token %}
        
        
        
        
    

    

    
    
    

结论：
两种AJAX提交文件或者图片需要依赖FormData()
但是FormData()不是所有的浏览器都支持的，IE的低版本就不支持
所以上传文件优先选择iframe

上一篇：Django之Ajax【交互篇五】点击跳转
目录篇：Django之前后端交互篇目录 点击跳转
下一篇：Django之JSONP跨域请求【交互篇七】点击跳转