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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。