Django实现全类型文件上传、前端展示与下载完整指南

追风的人

发布时间：2026-10-13 | 4人浏览过

原创

本文详解如何在Django中配置接收任意类型文件，并通过前端Ajax实现文件的上传、预览（包括视频、图片及文档）以及下载功能。内容涵盖settings.py中的静态与媒体路径配置，前端FormData与jQuery AJAX交互代码，以及后端基于FileResponse的文件流处理逻辑，帮助开发者快速构建完整的文件管理模块。

Django文件处理流程概述

首先，我们需要明确后台处理文件上传的基本流程。

在Django项目中，正确的配置是接收和处理文件的前提。我们需要在项目的settings.py文件中进行相关设置。

Settings配置与静态媒体路径


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="图片")

接下来，我们编写前端代码，实现用户选择文件并通过Ajax提交的功能。

前端文件上传与展示实现


<!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=" rel="external nofollow" imagess">链接</a>
</div>

</div>
<br>
<br>
<br>
<br>
<div>
  {#  href="/static/img/TC代码.txt" rel="external nofollow" #}
  <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

综上所述，通过合理配置Django的静态与媒体路径，结合前端Ajax技术与后端文件处理逻辑，我们可以实现一个完整的文件上传、展示及下载系统。

至此，关于Django接收所有文件、前端展示文件（包括视频、文件、图片）以及Ajax请求的实现方法已介绍完毕。如需了解更多关于Django处理文件的内容，建议查阅本站过往文章或继续浏览后续相关教程，感谢大家的支持！