浅析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 相关文章推荐
Python3里的super()和__class__使用介绍
Apr 23 Python
Fiddler如何抓取手机APP数据包
Jan 22 Python
利用Pandas 创建空的DataFrame方法
Apr 08 Python
python使用KNN算法识别手写数字
Apr 25 Python
python实现微信定时每天和女友发送消息
Apr 29 Python
简单了解Django应用app及分布式路由
Jul 24 Python
浅谈Python中的异常和JSON读写数据的实现
Feb 27 Python
python 使用cx-freeze打包程序的实现
Mar 14 Python
python用TensorFlow做图像识别的实现
Apr 21 Python
python编写实现抽奖器
Sep 10 Python
在Python中字典按值排序的实现方法
Nov 12 Python
flask框架中的cookie和session使用
Jan 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
python实现验证码识别功能
2018/06/07 Python
Python文件读写常见用法总结
2019/02/22 Python
Python中format()格式输出全解
2019/04/12 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
Python进行特征提取的示例代码
2020/10/15 Python
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
毕业生文员求职信
2013/11/03 职场文书
销售员岗位职责范本
2014/02/03 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
二审答辩状范文
2015/05/22 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android