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


Posted in Python onMarch 09, 2020

如果是后台上传文件:

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

Python 相关文章推荐
探寻python多线程ctrl+c退出问题解决方案
Oct 23 Python
Python在Windows和在Linux下调用动态链接库的教程
Aug 18 Python
使用paramiko远程执行命令、下发文件的实例
Oct 01 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
Mar 22 Python
Django框架基础模板标签与filter使用方法详解
Jul 23 Python
简单的Python调度器Schedule详解
Aug 30 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
Feb 25 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
Feb 26 Python
Python流程控制语句的深入讲解
Jun 15 Python
python模块如何查看
Jun 16 Python
pandas处理csv文件的方法步骤
Oct 16 Python
Ubuntu20下的Django安装的方法步骤
Jan 24 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
Mar 09 #Python
python框架Django实战商城项目之工程搭建过程图文详解
Mar 09 #Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
Mar 08 #Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
Mar 08 #Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
Mar 08 #Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
Mar 08 #Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
Mar 08 #Python
You might like
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
Python实现分段线性插值
2018/12/17 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
女娲补天教学反思
2014/02/05 职场文书
实习工作表现评语
2014/12/31 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技