AJAX和from-上传文件示例【django项目】

时间 2019-11-11

原文原文链接

项目简述

本Django项目为测试实例项目，用于学习测试。html

分别用三种Django文件上传方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)作上传功能示例python

文件	文件释义
form_upload.html	form上传文件静态页面
jquery_ajax_upload.html	jQuery+jQuery.ajax上传文件静态页面
js_ajax_upload.html	原生JS+原生ajax上传文件静态页面
Fupload.py	form上传文件方法
JAupload.py	原生JS+原生ajax上传文件方法
JQupload.py	jQuery+jQuery.ajax上传文件方法

项目架构

Mydjango
    APP
        file
        migrations
            __init__.py
        static
            jquery-3.3.1.min.js
        templates
            form_upload.html
            jquery_ajax_upload.html
            js_ajax_upload.html
        views
            Fupload.py
            JAupload.py
            JQupload.py
        __init__.py
        admin.py
        apps.py
        models.py
        tests.py
    Mydjango
        setting.py
        urls.py
        wsgi.py

项目示例

建立项目

django-admin startproject Mydjango
cd Mydjango
python manage.py startapp APP

form_upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form upload</title>
</head>
<body>
<h1>form方式上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe -->
     <form action="f_upload.html" method="POST" enctype="multipart/form-data">
         {% csrf_token %}
         <!-- 上传文件必定要给name参数 -->
         <input type="file" name="uploadfile">
         <input type="submit">
     </form>
</body>
</html>

jquery_ajax_upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax upload</title>
    <script src="../static/jquery-3.3.1.min.js"></script>
</head>
<body>

<h1>jQuery+jQuery方式的ajax上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe -->
{% csrf_token %}
         <input id="Upfile" type="file"  multiple="multiple" >
         <a id="FileSub">提交</a>

<script>
    $("#FileSub").click(function() {

        var f_obj = $("#Upfile").get(0).files[0];                       //获取上传文件信息
        console.log("文件对象：",f_obj);
        console.log("文件名称是：",f_obj.name);
        console.log("文件大小是：",f_obj.size);

        var data = new FormData();                                      //建立formdata对象，便于将文件传输到后端
        data.append("file",f_obj)                                        //在formdata对象中添加(封装)文件对象

        $.ajax({
            url:'jq_upload.html',
            type:'POST',
            data:data,
            cache: false,                                               //上传文件无需缓存
            processData:false,                                          //不对数据作序列化操做
            contentType:false,                                          //不定义特殊链接类型
            success:function (arg) {
                alert("文件已经上传成功，点击肯定刷新页面");
                location.reload();
                                    }
            })
        });
</script>
</body>
</html>

js_ajax_upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax upload</title>
</head>
<body>

<h1>原生js+原生ajax方式上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe -->
{% csrf_token %}
         <input id="Upfile" type="file"  multiple="multiple" >
         <a onclick="Js_Ajax();">提交</a>

<script>
    function Js_Ajax() {
        var xhr = new XMLHttpRequest();                                                         //建立一个空对象，用于传输后端
        xhr.onreadystatechange = function () {                                                  //指定回调函数
            if (xhr.readyState == 4) {                                                           //回调函数状态判断
                console.log("返回信息：", xhr.responseText);
                alert("文件已经上传成功，点击肯定刷新页面");
                location.reload();
            }
        };
        xhr.open('POST', 'ja_upload.html');                                                       //创建POST方式请求
        xhr.setRequestHeader('Conten-Type', 'application/x-www-foorm-urlencoded;charset-UTF-8');  //POST数据请求头

        var f_obj = document.getElementById("Upfile").files[0];                                   //获取上传文件对象
        console.log("文件对象：", f_obj);
        console.log("文件名称是：", f_obj.name);
        console.log("文件大小是：", f_obj.size);

        var data = new FormData();                                                                //建立formdata对象，便于将文件传输到后端
        data.append("file", f_obj);                                                                //在formdata对象中添加(封装)文件对象

        xhr.send(data);                                                                            //创建的POST请求发送的数据
    };
</script>
</body>
</html>

Fupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse


def F_Upload(request):                 # form 方式提交上传文件
    if request.method == "GET":
        return render(request, 'form_upload.html', )
    else:
        F = request.FILES
        print("form上传的文件是：",F)                   #能够看到保护文件名和文件对象的字典
        f_obj = F.get('uploadfile')                     #上传的文件对象

        N = f_obj.name                                  #上传的文件名称
        S = f_obj.size                                  #上传的文件大小

        print("文件名称是：",N)
        print("文件大小是：",S)

        W_File(f_obj)                                   #执行上传文件的方法
        return HttpResponse('文件上传成功！')
def W_File(file_obj):                                   #上传文件写入服务器,参数为上传的文件对象
    f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器建立上传同名的文件
    for line in file_obj.chunks():                      # 分块拿上传数据
        f.write(line)                                   # 循环写入拿到的数据块到服务器
    f.close()

JAupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse

def JA_Upload(request):
    if request.method == "GET":
        return render(request,'js_ajax_upload.html',)
    else:
        file_obj = request.FILES.get('file')                # 拿到from获取到的file数据
        print("上传文件名称是：", file_obj.name)
        print("上传文件大小是：", file_obj.size)

        f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器建立上传同名的文件
        for line in file_obj.chunks():                      # 分块拿上传数据
            f.write(line)                                   # 循环写入拿到的数据块到服务器
        f.close()
        return HttpResponse('文件上传成功！')

JQupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponse

def JQ_Upload(request):
    if request.method == "GET":
        return render(request,'jquery_ajax_upload.html',)
    else:
        file_obj = request.FILES.get('file')                # 拿到from获取到的file数据
        print("上传文件名称是：", file_obj.name)
        print("上传文件大小是：", file_obj.size)

        f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器建立上传同名的文件
        for line in file_obj.chunks():                      # 分块拿上传数据
            f.write(line)                                   # 循环写入拿到的数据块到服务器
        f.close()
        return HttpResponse(file_obj.name)

urls.py

from django.contrib import admin
from django.urls import path,re_path
from APP.views import Fupload,JAupload,JQupload

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path('^f_upload.html$',Fupload.F_Upload),
    re_path('^ja_upload.html$',JAupload.JA_Upload),
    re_path('^jq_upload.html$',JQupload.JQ_Upload),
]

setting.py

INSTALLED_APPS添加创建的APPjquery

'APP',

MIDDLEWAREajax

注释掉csrf部分
#'django.middleware.csrf.CsrfViewMiddleware',

TEMPLATES配置模版路径django

'DIRS': [os.path.join(BASE_DIR, 'APP/templates')],

运行测试访问测试

python manage.py runserver

访问地址后端

http://127.0.0.1:8000/f_upload.html
http://127.0.0.1:8000/jq_upload.html
http://127.0.0.1:8000/ja_upload.html