如果是后台上传文件:

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("", 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

【django】 接收所有文件，前端展示文件（包括视频，文件，图片）ajax请求的更多相关文章

  1. 我的Android进阶之旅------>Android使用正则表达式匹配扫描指定目录下的所有媒体文件(音乐、图像、视频文件)

    今天使用正则表达式匹配指定目录下的所有媒体文件,下面将这份代码简化了,可以收藏下来,当作工具类. package match; import java.io.File; import java.uti ...

  2. 如何在微信中发送"相册"文件时有选择性地显示视频文件

    相信很多微信用户在使用微信给朋友,同事发送相册中的文件时,微信会显示你手机中的视频文件,这样很不方便. 如果要完全不显示视频文件: 随便在手机中建立一个文件夹,名字叫 ".nomedia&q ...

  3. Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例

    一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...

  4. Django结合Echarts在前端展示数据

    前言 最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来. 这时就想到利用Echarts这个开源项目,但是Djang ...

  5. layui上传文件前端报404，实际文件已经上传成功

    原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 第一种 在后台上加上@ResponseBody 第二种 @ResponseBody @Request ...

  6. 巨蟒django之权限9:前端展示修改删除合并&&权限展示

    1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示

  7. 查找存在某字符的文件列表，不包括svn文件

    find . ! -wholename '*.svn*' -print | xargs grep "img" | awk -F ':.' '{print $1}' | uniq

  8. idea引入项目下所有文件（ps：包括静态文件夹）

    打开项目的目录结构 点击finish 最后删除目录下多余的src就可以了

  9. 【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例

    <body><textarea id='a' rows=100 cols=300>result:</textarea>><script>var a ...

  10. FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑

    FFmpeg_Tutorial FFmpeg工具和sdk库的使用demo 一.使用FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑 1.基本介绍 对于每一个从事音视频技术开发的工程师,想必没 ...

随机推荐

  1. 树分治（挑战p360）

    poj1741 题:http://poj.org/problem?id=1741 #include<iostream> #include<algorithm> #include ...

  2. 005.前端开发知识，前端基础CSS（2020-01-14）

    一.CSS权重 权重是可以叠加的,事例如下: div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 a:hover -----—> ...

  3. linux 上安装 keepalive

    1.keepalive 单机安装 1.1 安装环境 yum -y install kernel-devel* openssl-* popt-devel lrzsz openssh-clients li ...

  4. VBA引用管理工具（可用于32、64位Office，Win7 Win10均可）

    VBAReferenceManager安装和使用方法,操作请看动态图: 下载地址: VBAReferenceManager.zip

  5. iOS 去掉导航栏最下面线的方法

    导航栏透明,但是字体就不显示了,所以不可行. 下面两种方法是让导航栏下面的线不显示. // 方法1: [[self.navigationController.navigationBar.subview ...

  6. ROS中的日志（log）消息

    学会使用日志(log)系统,做ROS大型项目的主治医生 通过显示进程的运行状态是好的习惯,但需要确定这样做不会影响到软件的运行效率和输出的清晰度.ROS 日志 (log) 系统的功能就是让进程生成一些 ...

  7. [LC] 293. Flip Game

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  8. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  9. iOS(Swift)学习笔记之去除UINavigationBar下方横线

    本文为原创文章,转载请标明出处 // 去除UINavigationBar下方横线 navigationController.navigationBar.shadowImage = UIImage() ...

  10. IOUtils和FileUtils的学习笔记

    pom文件导入依赖import org.apache.commons.io.FileUtils; <dependency> <groupId>commons-io</gr ...