zoukankan      html  css  js  c++  java
  • 【django】 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

    如果是后台上传文件:
    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
  • 相关阅读:
    Tomcat启动提示At least one JAR was scanned for TLDs yet contained no TLDs
    elasticsearch 相关操作
    ES下载与安装
    分词器
    Go语言中import导入包时:点. 、下划线_ 、别名的用法
    删除某库中所有表
    yum 安装mysql
    chromedriver下载及配置
    前端库在Core Web项目中的引入和使用
    The database provider attempted to register an implementation of the 'IRelationalTypeMappingSource' service.
  • 原文地址:https://www.cnblogs.com/wanghong1994/p/12442442.html
Copyright © 2011-2022 走看看