【django】接收所有文件，前端展示文件（包括視頻，文件，圖片）ajax請求

本文轉載自查看原文 2020-03-08 14:16 945 django后端分離/ Django組件/ Django基礎

如果是后台上傳文件:
setting配置：
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, "media"),
]

# Django用戶上傳的都叫media文件
MEDIA_URL = "/media/"
# media配置，用戶上傳的文件都默認放在這個文件夾下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")


model的配置：
 img = models.FileField(upload_to="img/",verbose_name="圖片")

接收任何文件的前端代碼： <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="/upload/" enctype="multipart/form-data" target="ifm1">


    <input type="file" name="file" id="file"/>


    <input type="button" value="提交" onclick="upload()"/>
</form>
<br>
<br>
<br>
<br>
<div>顯示圖片
    <img id="images">
</div>
<br>
<br>
<br>
<br>
<div>顯示路徑
    <a href="" id="imagess">鏈接</a>
</div>


</div>
<br>
<br>
<br>
<br>
<div>
    {#    href="/static/img/TC代碼.txt" #}
    <a id="up"> 下載文件</a>
</div>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
    function upload() {
        var formData = new FormData();
        var file = document.getElementById('file').files[0];
        formData.append("file", file);
        $.ajax({
            url: "upload/",
            type: "post",
            data: formData,
            dataType: "json",
            cache: false,     //上傳文件無需緩存
            processData: false,//用於對data參數進行序列化處理 這里必須false
            contentType: false, //必須*/
            success: function (data) {
                console.log("22", data);
                $("#images").attr("src", data.image)
                $("#imagess").attr("href", data.image)

            }
        });
    }

    $("#up").on("click", function () {
        $.ajax({
            url: "http://127.0.0.1:8000/down/",
            type: "get",
            data: {},
            success: function (data) {
                var $a = $('<a></a>');

                $a.attr("href", "http://127.0.0.1:8000/down/");
                $("body").append($a);
                $a[0].click();
                $a.remove();
            }

        })

    });
</script>
</body>
</html>

增加任何文件的后端接口代碼： from rest_framework.views import APIView
from django.shortcuts import render, redirect, HttpResponse
from dal import models
from django.http import JsonResponse


class ImageShow(APIView):

    def post(self, request):
        name = str(request.data.get("name"))
        message = {}

        img_url  = "/static/img/{}".format(name)

        obj = models.Car.objects.filter(img_url=img_url).first()
        if obj :

            message['code'] = 200
            message['message'] = img_url # 返還路徑
            return JsonResponse(message)

下載文件后端：
from django.utils.http import urlquote
from rest_framework.views import APIView
from django.shortcuts import render, redirect, HttpResponse
from dal import models
from django.http import JsonResponse, FileResponse, StreamingHttpResponse


class fileShow(APIView):

    def get(self, request):
        message = {}
        file = open('media/img/TC代碼.txt','rb')   # 字符串替換成文件 
        print("file",file.name)
        # file_names = file.name.split('/')[-1]
        # print("file_names",file_names)

        response = FileResponse(file)
        response['Content-Type'] = 'application/octet-stream'

        response['Content-Disposition'] = "attachment;filename={}".format(urlquote("TC代碼.txt")) # 字符串替換成下載文件
        print(response)
        return response

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Django序列化&Django接收文件&Ajax通過FormData上傳文件&ifram+表單偽造Ajax請求【Django】接收照片，儲存文件前端代碼前端接收 post 請求返回的文件【django】ajax，上傳文件，圖片預覽 django 接收多個文件 Django之AJAX文件上傳 django 上傳圖片和文件並在頁面展示 Django之Ajax文件上傳 Django之Ajax文件上傳 ajax上傳文件及nodeJS接收

【django】 接收所有文件，前端展示文件（包括視頻，文件，圖片）ajax請求

免責聲明！

【django】接收所有文件，前端展示文件（包括視頻，文件，圖片）ajax請求