浅析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 相关文章推荐
Ruby使用eventmachine为HTTP服务器添加文件下载功能
Apr 20 Python
Python的爬虫程序编写框架Scrapy入门学习教程
Jul 02 Python
Python实现树的先序、中序、后序排序算法示例
Jun 23 Python
Windows平台Python连接sqlite3数据库的方法分析
Jul 12 Python
Python设计模式之观察者模式简单示例
Jan 10 Python
Python编程实现的简单神经网络算法示例
Jan 26 Python
python 3.7.0 下pillow安装方法
Aug 27 Python
Pandas 按索引合并数据集的方法
Nov 15 Python
Python属性和内建属性实例解析
Jan 14 Python
python sorted函数原理解析及练习
Feb 10 Python
基于keras中的回调函数用法说明
Jun 17 Python
pandas中DataFrame检测重复值的实现
May 26 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/12/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
使用python+whoosh实现全文检索
2019/12/09 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
机关单位动员会主持词
2014/03/20 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
村级个人对照检查材料
2014/08/22 职场文书
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA