如果是后台上传文件:

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. G - Radar Scanner Gym - 102220G（中位数～～）

    zThere are n rectangle radar scanners on the ground. The sides of them are all paralleled to the axe ...

  2. VBA编程常用词汇英汉对照表

    表 20‑1到表 20‑8是VBA编程中使用频率最高的英文单词,按字母排序.词性列中,a表示形容词,n表示名词,v表示动词,p表示介词以及其他词性. 表 20‑1 VBA编程常用词汇表 单词 中文 词 ...

  3. IPC之——信号量集(多个信号量)

    如果两个进程不仅需要同步,还要保证先后执行顺序,就要用两个信号量(互斥锁)来解决 //栅栏模型:实现以下框架中的四个子进程 所有进程做完任务后 在一起执行下一次  #include <stdio ...

  4. freeswitch的internal的profile无法启动

    服务器断电重启后,导致freeswitch的internal的profile无法启动 在fs_cli执行 sofia profile internal restart 打印如下信息: [ERR] sw ...

  5. django框架进阶-使用缓存-长期维护

    ###############   django-缓存页面    ############### ########################################### # 全站缓存, ...

  6. 关于AI行业创业的6个问题

    第一个问题:互联网 vs 人工智能 首先如果今天大家选择创业,我建议更应该关注人工智能,而非互联网.为什么这么讲? 1. 互联网的流量红利已经消失: 以PC来说,全球PC出货量连续5年下滑.大家知道国 ...

  7. 获取指定网卡对应的IP地址

    #include <stdio.h> #include <string.h> #include <sys/socket.h> #include <sys/ty ...

  8. 微信小游戏广告位iphonex底部适配问题

    最近在公司开发游戏,使用cocos creator做微信小游戏,遇到一个很恶心的问题,如图: 如图所示,微信的广告位被iphonex的底部bar给弹出了一点位置,没有靠在底部. 在这里不得不吐槽一下微 ...

  9. 正负小数js正则表达式

    var reg = /^(([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?)|([-]([1-9]\d+(.[0-9]{1,4})?|\d(.[0-9]{1,4})?) ...

  10. CIA Hive Beacon Infrastructure复现1——使用Apache mod_rewrite实现http流量分发

    0x00 前言 2017年11月9日维基解密公布一个代号为Vault8的文档,包含服务器远程控制工具Hive的源代码和开发文档.开发文档中的框架图显示Hive支持流量分发功能,若流量有效,转发至Hon ...