浅析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 中__name__ = '__main__' 的作用
Jul 05 Python
Python采用socket模拟TCP通讯的实现方法
Nov 19 Python
Python中的字典遍历备忘
Jan 17 Python
Python实现计算最小编辑距离
Mar 17 Python
Python从零开始创建区块链
Mar 06 Python
python中字符串数组逆序排列方法总结
Jun 23 Python
python将dict中的unicode打印成中文实例
May 11 Python
Python 如何创建一个简单的REST接口
Jul 30 Python
详解python UDP 编程
Aug 24 Python
Python用access判断文件是否被占用的实例方法
Dec 17 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
Jan 28 Python
Python中os模块的简单使用及重命名操作
Apr 17 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中随机显示图片的函数代码
2011/06/23 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
纯js实现隔行变色效果
2017/11/29 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
JavaScript中callee和caller的区别与用法实例分析
2019/06/28 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python如何解除一个装饰器
2020/08/07 Python
数据库什么时候应该被重组
2012/11/02 面试题
Order by的几种用法
2013/06/16 面试题
自主招生自荐信格式
2013/12/03 职场文书
表彰先进集体通报
2014/01/12 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
企业法人授权委托书
2014/04/03 职场文书
委托书模板
2014/04/04 职场文书
团支部建设方案
2014/05/02 职场文书
求职信怎么写
2014/05/23 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
个性与发展自我评价
2015/03/06 职场文书
英语演讲开场白
2015/05/29 职场文书
观看建国大业观后感
2015/06/01 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis