浅析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标准日志模块logging的使用方法
Nov 01 Python
Python采用raw_input读取输入值的方法
Aug 18 Python
Python base64编码解码实例
Jun 21 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
Oct 29 Python
python实现对任意大小图片均匀切割的示例
Dec 05 Python
Django 多环境配置详解
May 14 Python
selenium处理元素定位点击无效问题
Jun 12 Python
Python中的pathlib.Path为什么不继承str详解
Jun 23 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
Sep 20 Python
基于Pytorch SSD模型分析
Feb 18 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
Apr 30 Python
详解KMP算法以及python如何实现
Sep 18 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 Undefined index的问题
2009/06/01 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
一个比较不错的PHP日历类分享
2014/11/18 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
如何用javascript控制上传文件的大小
2006/10/26 Javascript
学习ExtJS table布局
2009/10/08 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
vue axios登录请求拦截器
2018/04/02 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
对python的文件内注释 help注释方法
2018/05/23 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python中K-means算法基础知识点
2021/01/25 Python
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
运动会口号16字
2014/06/07 职场文书
公民代理授权委托书
2014/09/24 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
优秀护士事迹材料
2014/12/25 职场文书
导游词400字
2015/02/13 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
python基础之类方法和静态方法
2021/10/24 Python
MySQL创建管理RANGE分区
2022/04/13 MySQL