实战Django之ajax两种上传方式和iframe上传方式

目录篇：Django之前后端交互篇目录 点击跳转
主篇：Django之ajax文件上传的两种方式和ifname上传文件【交互篇六】点击跳转

目录

• 1.创建Django项目
• 2.创建app（并且app目录下创建一个urls.py文件）
• 3.定义setting配置文件的静态目录路径和创建静态目录（我们需要js文件）
• 4.定义请求的URL路由分发
• 5.定义app下的URL路由
• 6.定义url对应函数处理
• 7.定义响应的html文件
• 8.启动Django
• 9.浏览器访问URL结果

1.创建Django项目

Django之创建项目【二】：https://blog.csdn.net/Burgess_zheng/article/details/86505526

2.创建app（并且app目录下创建一个urls.py文件）

进入项目目录下
创建app命令：
      F:\Burgess\Python\pycharm实验脚本\test\project_burgess>python manage.py startapp submit_views

3.定义setting配置文件的静态目录路径和创建静态目录（我们需要js文件）

路径:project_burgess/project_burgess/setting

 

4.定义请求的URL路由分发

路径:project_burgess/project_burgess/urls.py

from django.contrib import admin
from django.urls import path,re_path #Django版本2.0以上
from project_burgess import views
from django.conf.urls import url  #Django2.0
from django.conf.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
   
    #提交各种数据数据类型测试
    re_path('submit/', include("submit_views.urls")),
    # url(r'^submit/', include("submit_views.urls")),

]

5.定义app下的URL路由

路径:project_burgess/submit_views/urls.py

__author__ = "Burgess Zheng"
#!/usr/bin/env python
#-*- coding:utf-8 -*-
from django.urls import path,re_path #Django版本2.0以上
from submit_views import views
from django.conf.urls import url  #Django2.0

app_name='namespace'
urlpatterns = [
    #upload_file
    re_path('upload/', views.upload),
]

6.定义url对应函数处理

路径:project_burgess/submit_views/views.py

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))

7.定义响应的html文件

对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

路径:project_burgess/templates/upload.html

    
    
    


    {{ csrf_token }}

    

        
        上传
    
    
    
    


    

        {% csrf_token %}
        
        
        
        
    

    



    
    

8.启动Django

手动：python manage.py runserver 127.0.0.1:8000

pycharm:

9.浏览器访问URL结果

GET请求

原生ajax（XMLHttpRequest()对象方式）:点击上传随便上传个文件图片，然后点击-->提交XHR

jquery ajax方式:点击上传随便上传个文件图片，然后点击-->提交jQuery

iframe方式:点击选择文件，随便上传个图片，做了预览功能（上面ajax接收了后端提交的图片路径也可做预览）

查看后端保存文件的目录

目录篇：Django之前后端交互篇目录 点击跳转
主篇：Django之ajax文件上传的两种方式和ifname上传文件【交互篇六】点击跳转