【django】 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

【django】 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

PythonNew_Mr.Wang   2020-03-08 我要评论
如果是后台上传文件:
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:8000https://img.qb5200.com/download-x/down/",
            type: "get",
            data: {},
            success: function (data) {
                var $a = $('<a></a>');

                $a.attr("href", "http://127.0.0.1:8000https://img.qb5200.com/download-x/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

 

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们