浅析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转换摩斯密码示例
Feb 16 Python
python的re正则表达式实例代码
Jan 24 Python
我就是这样学习Python中的列表
Jun 02 Python
Django 全局的static和templates的使用详解
Jul 19 Python
基于多进程中APScheduler重复运行的解决方法
Jul 22 Python
Python使用lambda表达式对字典排序操作示例
Jul 25 Python
python实现的config文件读写功能示例
Sep 24 Python
python3中pip3安装出错,找不到SSL的解决方式
Dec 12 Python
Python2与Python3的区别详解
Feb 09 Python
PyTorch中Tensor的数据统计示例
Feb 17 Python
关于python的缩进规则的知识点详解
Jun 22 Python
Python如何定义有可选参数的元类
Jul 31 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 前一天或后一天的日期
2008/06/28 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Django自定义manage命令实例代码
2018/02/11 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
世界最大的票务市场:viagogo
2017/02/16 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
财务会计应届生求职信
2013/11/24 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
三查三看党性分析材料
2014/02/18 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL