如果是后台上传文件:

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. D - Project Presentation(DFS序+倍增LCA）

    You are given a tree that represents a hierarchy in a company, where the parent of node u is their d ...

  2. F5 BIG-IP LTM会话保持

  3. 106）PHP，缩略图代码和结果展示

    首先是 代码展示: <?php class CImage { /** * 生成保持原图纵横比的缩略图,支持.png .jpg .gif * 缩略图类型统一为.png格式 *@param $src ...

  4. URI和URL对比

    URL是Uniform Resoure Locator(统一资源定位器)的缩写.就是WWW页的地址. 其URL地址格式排列为:scheme://host:Port/path --Internet资源类 ...

  5. JavaScript学习总结（七）Ajax和Http状态字

    转自:http://segmentfault.com/a/1190000000691919 Ajax及其工作原理 AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里 ...

  6. BZOJ 1~10 精简题解

    从这星期起,我开始了怒刷BZOJ的旅程.这几天刷了10道题(由于"档期"的原因,所以有几道题没打完-..捂脸--..) 精简题解: 1000 A+B Problem --.. [B ...

  7. setContext or setCharacterEncoding

    request.setCharacterEncoding()是设置从request中取得的值或从数据库中取出的值response.setContentType("text/html;char ...

  8. 关于KMP算法的重大发现

    之前写KMP模板的时候,nx[i]代表最大的一个x,使s[1,x-1]是s[1,i-1]的后缀.(方法1) 然而网上还有另一种方法求nx数组,nx[i]表示最大的一个x,使s[1,x]是s[1,i]的 ...

  9. Luogu_2434_[SDOI2005]区间

    题目描述 现给定n个闭区间[ai, bi],1<=i<=n.这些区间的并可以表示为一些不相交的闭区间的并.你的任务就是在这些表示方式中找出包含最少区间的方案.你的输出应该按照区间的升序排列 ...

  10. java使用jackson生成和解析JSON

    java使用jackson生成和解析JSON 1.导包 2.生成json和解析json package test; import com.fasterxml.jackson.core.JsonProc ...