浅析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使用poplib模块和smtplib模块收发电子邮件的教程
Jul 02 Python
详解python中字典的循环遍历的两种方式
Feb 07 Python
Python Unittest自动化单元测试框架详解
Apr 04 Python
Python机器学习库scikit-learn安装与基本使用教程
Jun 25 Python
python查看列的唯一值方法
Jul 17 Python
对python3中pathlib库的Path类的使用详解
Oct 14 Python
python障碍式期权定价公式
Jul 19 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
Aug 17 Python
Python迭代器模块itertools使用原理解析
Dec 11 Python
Python3 Click模块的使用方法详解
Feb 12 Python
python json 递归打印所有json子节点信息的例子
Feb 27 Python
Django实现前台上传并显示图片功能
May 29 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
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python使用贪婪算法解决问题
2019/10/22 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
护士求职信
2014/07/05 职场文书
销售会议开幕词
2015/01/28 职场文书
民主评议党员个人自我评价
2015/03/03 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python实现简单倒计时功能
2021/04/21 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers