day23-基于ajax文件上传和上传图片之后预览

一、前言

　之前我们是用forms的方式去上传文件，后台去读取，然后去写入到后台去，具体博客：day18-Django获取1个或多个数据以及文件上传 ，我们今天使用的是，ajax方式去操作文件上传的动作，这边有三种方式，

原生ajax上传文件
jquery的ajax的上传文件
iframe方式(伪ajax方式)上传文件

　这个上传文件我们说完了，下面还有就是上传图片之后的预览，这个我们也要学会的，这个我们下面会一步一步的详细的介绍的，下面进入正题吧。

二、操作前提

2.1、路由url的设置

说明：我们首先设置一下路由

from django.urls import path
from app01.views import test

urlpatterns = [
    path('upload/',test.upload),   #上传文件页面
    path('upload_file/',test.upload_file),  #上传文件功能
]

2.2、upload函数

说明：通过upload函数显示上传页面

def upload(request):
    return render(request,'upload.html')

2.3、upload_file函数

说明：这边主要处理上传过来的文件，写到服务器上

def upload_file(request):
    username = request.POST.get('username')
    fafafa = request.FILES.get('fafafa')
    print(username,fafafa)  #输出 root settings.xml
    with open(fafafa.name,'wb') as f:
        for item in fafafa.chunks():  #把文件写入到服务器端
            f.write(item)
    ret = {'code':True,'data':request.POST.get('username')}
    import json
    return HttpResponse(json.dumps(ret))

2.4、upload.html的模板

说明：这边我只写html和css部分，js上传功能，我们下面详细的讲解，这边静态的东西如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .upload{
            display: inline-block;
            padding: 10px;
            background-color: brown;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 99;
        }
        .file{
            width: 100px;height: 50px;opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>
    <!--原生ajax和jquery ajax上传文件定义的html-->
    <div style="position: relative;width: 100px;height: 50px;">
        <!--因为这个改不了，所以这个上传的标签只能自定义组件，就是在外面嵌套div-->
        <input class="file" type="file" id="fafafa" name="afafaf">
        <a class="upload">上传</a>
    </div>
    <!--原生ajax的触发按钮-->
    <input type="button" value="提交XHR" onclick="xhrSubmit();"/>
    <!--jquery的发送方式触发按钮-->
    <input type="button" value="提交Jquery" onclick="jqSubmit();"/>
    <!--分隔符-->
    <hr/>
    <!--伪类ajax上传文件定义的html-->
    <form action="/upload_file/" method="post" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1"></iframe> <!--正常情况下，iframe在前端是不显示的，但是我们这边为了方便调试，所以暂时打开-->
        <input type="file" name="fafafa"/>
        <!--iframe方式上传文件-->
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <!--图片存放的地方-->
    <div id="preview"></div>
</body>
</html>

upload.html