浅析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 相关文章推荐
centos系统升级python 2.7.3
Jul 03 Python
使用Python编写类UNIX系统的命令行工具的教程
Apr 15 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
May 28 Python
Python随机数random模块使用指南
Sep 09 Python
Python环境搭建之OpenCV的步骤方法
Oct 20 Python
Django跨域请求问题的解决方法示例
Jun 16 Python
使用Py2Exe for Python3创建自己的exe程序示例
Oct 31 Python
理想高通滤波实现Python opencv示例
Jan 30 Python
Python拼接字符串的7种方式详解
Mar 19 Python
Python如何使用正则表达式爬取京东商品信息
Jun 01 Python
为什么说python适合写爬虫
Jun 11 Python
Python装饰器详细介绍
Mar 25 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 进度条实现代码
2009/03/10 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JS动态创建DOM元素的方法
2015/06/09 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python实现贪吃蛇小游戏
2020/03/21 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
详解【python】str与json类型转换
2019/04/29 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
String和StringBuffer的区别
2015/08/13 面试题
保证书范文大全
2014/04/28 职场文书
给校长的建议书500字
2014/05/15 职场文书
模特大赛策划方案
2014/05/28 职场文书
2014年计生标语
2014/06/23 职场文书
年检委托书
2014/08/30 职场文书
北大自主招生自荐信
2015/03/04 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL