浅析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线程池的实现实例
Nov 18 Python
Python实现简单多线程任务队列
Feb 27 Python
python 统计代码行数简单实例
May 04 Python
python文件特定行插入和替换实例详解
Jul 12 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
Nov 03 Python
python实现在IDLE中输入多行的方法
Apr 19 Python
利用python求积分的实例
Jul 03 Python
python同步windows和linux文件
Aug 29 Python
Python Des加密解密如何实现软件注册码机器码
Jan 08 Python
pytorch使用tensorboardX进行loss可视化实例
Feb 24 Python
Python网页解析器使用实例详解
May 30 Python
Python中的turtle画箭头,矩形,五角星
Mar 16 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
2019十大人气国漫
2020/03/13 国漫
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python中的类学习笔记
2014/09/23 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python检查指定文件是否存在的方法
2015/07/06 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
利用Python检测URL状态
2019/07/31 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
影视广告专业求职信
2014/09/02 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
Linux安装Docker详细教程
2022/07/07 Servers