浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

如果是后台上传文件:

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=" 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 接收所有文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • django通过ajax发起请求返回JSON格式数据的方法

    本文实例讲述了django通过ajax发起请求返回JSON格式数据的方法.分享给大家供大家参考.具体实现方法如下: 这是后台处理的: def checkemail(request): user = None if request.POST.has_key('email'): useremail = request.POST['email'] result = {} user = User.objects.filter(useremail__iexact = useremail) if user:

  • Django处理Ajax发送的Get请求代码详解

    Django处理Ajax发送的Get请求实例,Ajax优点在一是异步请求,无需等待响应就可以再次发起请求,而是局部刷新,避免整个页面刷新的网页闪动. 打开命令行窗口,输入命令,创建django工程: django-admin startproject djajaxget cd djajaxget python manage.py startapp demo 使用PyCharm打开上一步创建的工程,在工程同名文件夹的settings.py文件,修改部分代码,注册应用,配置模板路径.静态文件路径,修

  • Django中ajax发送post请求 报403错误CSRF验证失败解决方案

    前言 今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显然,用ajax发送post请求这样就白搭了: 文末已经更新更简单的方法,上面的略显麻烦 上网上查了一下,看了几个别人的博客,才知道官网也早有说明解决办法,大致流程就是: 就是新建一个JavaScript文件,然后把网上给的代码粘贴进去,然后在你使用ajax的页面把它引入一下:当然,如果你在网上

  • Django中的ajax请求

    需求:实现ajax请求,在界面上任意地方点击,可以成功传参. 创建项目如下所示: settings.py文件的设置,这次我们除了要注册app和设置templates文件夹的路径,还要多设置一下static的路径,代码如下: STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ] 首先,先对界面做处理,设置高为100%,然后引入我们所需要的文件static代码如下: 然后我们根据需求,创建一个点击事件,实现ajax请求,代码如下: 最后我们在视

  • Django接收照片储存文件的实例代码

    后端: from rest_framework.views import APIView from car import settings from django.shortcuts import render, redirect, HttpResponse from dal import models from django.http import JsonResponse import os BASE_DIR = os.path.dirname(os.path.dirname(os.path

  • django ajax发送post请求的两种方法

    django ajax发送post请求的两种方法,具体内容如下所述: 第一种:将csrf_token放在from表单里 <script> function add_competion_goods() { $.ajax({ url: "{% url 'add_competition_goods' %}", type: "POST", dataType: "json", data: $('#add_competition_goods_fr

  • 浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

    如果是后台上传文件: 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

  • vue 录制视频并压缩视频文件的方法

    文件上传框<input type="file">,除了可以选择文件上传之外,还可以调用摄像头来拍摄照片或者视频并上传.capture属性可以判断前置or后置摄像头.在视频播放的过程中,用canvas定时截取一张图片,然后用gif.js生成一张GIF图,从而完成前端的视频压缩. 我这里使用的是Vue写的,以下是我的流程及代码: 一.下载gif.js相关文件,可以到这里下载,然后将这几个文件放在根目录的static/js里面. gif.js相关文件及存放路径 二.下载依赖包:

  • Qt音视频开发之视频文件保存功能的实现

    目录 一.前言 二.效果图 三.体验地址 四.相关代码 五.功能特点 5.1 基础功能 5.2 特色功能 5.3 视频控件 5.4 内核ffmpeg 一.前言 和音频存储类似,视频的存储也对应三种格式,视频最原始的数据是yuv(音频对应pcm),视频压缩后的数据是h264(音频对应aac),由于很多播放器或者早期的播放器不支持直接播放h264文件,所以需要用编码器编码成mp4格式,这块就需要用到ffmpeg里面一整套的编码流程,对yuv数据进行编码成MP4格式存储. 在经过对各种视频文件或者视频

  • PHP实现视频文件上传完整实例

    本文以一个完整实例的形式实现了视频文件上传的功能.虽然是比较基础的应用,仍有一定的参考价值.分享给大家供大家参考之用.具体方法如下: 首先,对PHP来说视频也属于文件,我们利用这个道理,可以通过与上传普通文件类似的方式实现上传PHP视频文件.不同的是视频文件一般较大,上传时间长,而php配置文件也对上传文件的大小有限制. 如果需要更好地用PHP实现文件上传,还是推荐使用FTP上传方式. 一.PHP处理代码如下: <?php //设置最多允许10个文件同时上传 define('MUILTI_FIL

  • python opencv 读取本地视频文件 修改ffmpeg的方法

    Python + opencv 读取视频的三种情况: 情况一:通过摄像头采集视频 情况二:通过本地视频文件获取视频 情况三:通过摄像头录制视频,再读取录制的视频 摄像头采集.本地视频文件的读取.写视频文件,网上都有代码. 我发现情况一和情况三都没有问题,大家注意读取自己通过摄像头录制的视频文件是没有问题的.但读取其他视频都会发现帧率为0(如果你获取视频的帧率并打印出来的话),并且退出读取.这时候读取是不成功的. 进去正题:如何解决读取视频失败的情况.这个问题很普遍,以至在官方教程的程序下面都提示

  • Django后台获取前端post上传的文件方法

    由于初学Django所以对于其特有的表单模板和models中的filefiled并不是特别熟悉.因此在本次开发中还是依照以往自己在html中写好图片提交表单: 注意在<form>表单的定义中一定要加上enctype= "multipart/form-data"属性,否则后台可能会取不到文件. 在form表单后一定要有{% csrf_token %} 我们在控制页面可以看到,当我们通过这样的表单进行提交后,FILES一栏中会有一个文件. 我们可以在views.py中通过 im

  • Django添加bootstrap框架时无法加载静态文件的解决方式

    项目结构如下: 开始时在setting.py中设置如下; html文件中的写法如下: 这样设置一直无法加载静态文件,只需要修改setting.py文件如下: 就可以加载到静态文件了. 补充知识:Django-项目上线后,静态文件配置失效以及404.500页面的全局配置 一.项目上线后静态文件失效 1.因为项目还没上线的时候,django会默认从setting.py中这个设置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BAS

  • Django动态随机生成温度前端实时动态展示源码示例

    目录 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 安装 使用步骤 基础组件 二.dwebsocket 简介 安装 使用方法 属性和方法 为了模拟随机的温度显示,在models中的表中的数据 views 路由 VUE中的代码 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 APScheduler的全称是Advanced Python Scheduler. 它是一个轻量级的 Python 定时任务调度框架. APSchedu

  • 前端使用koa实现大文件分片上传

    目录 引言 前端 拆分上传的文件流 后端 接收文件片段 合并文件片段 总结 引言 一个文件资源服务器,很多时候需要保存的不只是图片,文本之类的体积相对较小的文件,有时候,也会需要保存音视频之类的大文件.在上传这些大文件的时候,我们不可能一次性将这些文件数据全部发送,网络带宽很多时候不允许我们这么做,而且这样也极度浪费网络资源. 因此,对于这些大文件的上传,往往会考虑用到分片传输. 分片传输,顾名思义,也就是将文件拆分成若干个文件片段,然后一个片段一个片段的上传,服务器也一个片段一个片段的接收,最

随机推荐