浅析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之入门(五)缩进和选择
May 27 Python
python获取指定网页上所有超链接的方法
Apr 04 Python
python获取当前日期和时间的方法
Apr 30 Python
在Django的视图(View)外使用Session的方法
Jul 23 Python
详解Python 序列化Serialize 和 反序列化Deserialize
Aug 20 Python
numpy排序与集合运算用法示例
Dec 15 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
May 11 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
May 24 Python
python中PS 图像调整算法原理之亮度调整
Jun 28 Python
selenium+Chrome滑动验证码破解二(某某网站)
Dec 17 Python
python与js主要区别点总结
Sep 13 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
Dec 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
当海贼王变成JOJO风
2020/03/02 日漫
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
document.getElementById介绍
2011/09/13 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
如何基于Python实现数字类型转换
2020/02/07 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
驾驶员岗位职责
2014/01/29 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
优秀教师个人总结
2015/02/11 职场文书
创建文明城市倡议书
2015/04/28 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Python简易开发之制作计算器
2022/04/28 Python