如果是后台上传文件:

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. 怎么保证RabbitMQ和kafuka集群的高可用性？

    rabbitMQ有三种模式:单机模式,普通集群模式,镜像集群模式 RabbitMQ的高可用性   RabbitMQ是比较有代表性的,因为是基于主从做高可用性的,我们就以他为例子讲解第一种MQ的高可用性 ...

  2. Servlet&JSP复习笔记 04

    1.状态管理 因为HTTP协议是无状态协议,但很多时候需要将客户端和服务端的多次请求当做一个来对待.将多次交互中设计的数据进行保存. 状态:数据 管理:对数据的维护 2.Cookie 客户端向服务器发 ...

  3. 各大厂RTSP取流的URI

    目前使用过的各大厂商取流规则是在实际的工作中遇到的相关视频接入问题,通过rtsp协议接入视频数据的一些记录,其中的图片可能来源于网络,内容部分来源于网络,本人仅仅是对相关内容作了汇总. 海康RTSP取 ...

  4. 二：MySQL的操作

    1:创建数据库 create database  bjpowernode ; 2:使用数据库 use bjpowernode; 3:导入数据库文件sql source  然后把SQL文件拖过来就可以了 ...

  5. windows下redis的配置和jedis api的最基本的使用

    redis的安装直接跳过 1.注册redis服务 在DOM窗口下,进入redis的安装目录(可以先进入安装目录,然后shift+右键,选择在此处打开powershell窗口), 输入命令: redis ...

  6. JVM 的内存布局

    这是jdk7以后的版本 1. Heap(堆区) Heap OOM 障最主要的发源地, 它存储着几乎所有的实例对象, 堆由垃圾收集器自动回收, 堆区由各子线程共享使用.通常情况下 它占用的空间是所有内存 ...

  7. Java入门级文件下载_学习笔记

    文件下载和上一篇文件上传很像,就不多说了,传一个我写的一个下载歌曲的代码: 下面是Servlet代码: public class DownLoadServlet extends HttpServlet ...

  8. 为什么jdk1.8 HashMap的容量一定要是2的n次幂

    一.jdk1.8中,对“HashMap的容量一定要是2的n次幂”做了严格控制 1.默认初始容量: [Java] 纯文本查看 复制代码 ? 1 2 3 4 /**  * The default init ...

  9. mac android sdk manager 无法更新（被墙）

    http://www.androiddevtools.cn/ 一句话,相见恨晚!! 想把以前的旧安卓项目拿到MAC上 环境就卡住了,以前的包是4.4的,想试试5.0的,更新不动 Android Too ...

  10. SHELL用法五（Case语句）

    1.SHELL编程Case语句案例实战 1)Case选择条件语句的格式: case $INPUT in Pattern1) 语句1 ;; Pattern2) 语句2 ;; esac 2)Case语句企 ...