浅析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中的应用之translate和maketrans用法详解
Aug 27 Python
详解Python的Django框架中manage命令的使用与扩展
Apr 11 Python
Python中关于Sequence切片的下标问题详解
Jun 15 Python
纯用NumPy实现神经网络的示例代码
Oct 24 Python
Python文件路径名的操作方法
Oct 30 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
Jan 06 Python
Python中的特殊方法以及应用详解
Sep 20 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
Feb 25 Python
python爬虫破解字体加密案例详解
Mar 02 Python
PyTorch梯度裁剪避免训练loss nan的操作
May 24 Python
Python利用capstone实现反汇编
Apr 06 Python
python井字棋游戏实现人机对战
Apr 28 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魔术方法(Magic methods)的使用方法
2016/02/14 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
利用python获得时间的实例说明
2013/03/25 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python获取txt文件词向量过程详解
2019/07/05 Python
python日志模块logbook使用方法
2019/09/19 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
什么是索引指示器
2012/08/20 面试题
就业推荐表自我鉴定
2013/10/29 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
战友聚会邀请函
2014/01/18 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
离婚协议书格式
2015/01/26 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis