浅析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 ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
Jun 10 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
Nov 10 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
Nov 11 Python
python数据抓取分析的示例代码(python + mongodb)
Dec 25 Python
解决Tensorflow使用pip安装后没有model目录的问题
Jun 13 Python
pyqt5 键盘监听按下enter 就登陆的实例
Jun 25 Python
python+selenium+PhantomJS抓取网页动态加载内容
Feb 25 Python
python实现udp传输图片功能
Mar 20 Python
Pygame的程序开始示例代码
May 07 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
Jun 23 Python
最新Python idle下载、安装与使用教程图文详解
Nov 28 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
Dec 13 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
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
python mysqldb连接数据库
2009/03/16 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
详解Python3中yield生成器的用法
2015/08/20 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python flask安装和命令详解
2019/04/02 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
董事长秘书岗位职责
2013/11/29 职场文书
项目资料员岗位职责
2013/12/10 职场文书
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python