浅析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实现截屏的函数
Jul 25 Python
Python中操作mysql的pymysql模块详解
Sep 13 Python
python 类对象和实例对象动态添加方法(分享)
Dec 31 Python
解决每次打开pycharm直接进入项目的问题
Oct 28 Python
Python3实现对列表按元组指定列进行排序的方法分析
Dec 22 Python
Python 利用切片从列表中取出一部分使用的方法
Feb 01 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
Aug 02 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
Jan 06 Python
Python基础之字典常见操作经典实例详解
Feb 26 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
Apr 16 Python
Django自关联实现多级联动查询实例
May 19 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
Nov 20 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.MVC的模板标签系统(二)
2006/09/05 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
使用python实现rsa算法代码
2016/02/17 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
Python中关于浮点数的冷知识
2019/09/22 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
金讯Java笔试题目
2013/06/18 面试题
个人自我剖析材料
2014/02/07 职场文书
效能监察建议书
2014/05/19 职场文书
大班下学期个人总结
2015/02/13 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
对PyTorch中inplace字段的全面理解
2021/05/22 Python
总结一些Java常用的加密算法
2021/06/11 Java/Android
python基础之类属性和实例属性
2021/10/24 Python
关于 Python json中load和loads区别
2021/11/07 Python
python标准库ElementTree处理xml
2022/05/20 Python