【django】 接收所有文件，前端展示文件（包括视频，文件，图片）ajax请求
如果是后台上传文件:
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="imagess">链接</a>
</div> </div>
<br>
<br>
<br>
<br>
<div>
{# href="/static/img/TC代码.txt" #}
<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("", 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请求的更多相关文章
- 我的Android进阶之旅------>Android使用正则表达式匹配扫描指定目录下的所有媒体文件(音乐、图像、视频文件)
今天使用正则表达式匹配指定目录下的所有媒体文件,下面将这份代码简化了,可以收藏下来,当作工具类. package match; import java.io.File; import java.uti ...
- 如何在微信中发送"相册"文件时有选择性地显示视频文件
相信很多微信用户在使用微信给朋友,同事发送相册中的文件时,微信会显示你手机中的视频文件,这样很不方便. 如果要完全不显示视频文件: 随便在手机中建立一个文件夹,名字叫 ".nomedia&q ...
- Django（十二）视图--利用jquery从后台发送ajax请求并处理、ajax登录案例
一.Ajax基本概念 [参考]:https://www.runoob.com/jquery/jquery-ajax-intro.html 异步的javascript.在不全部加载某一个页面部的情况下, ...
- Django结合Echarts在前端展示数据
前言 最近在用Django写UI自动化测试平台,基本快要弄完了,但是首页只有项目列表展示,一直感觉很空旷,所以想把一些关键数据在首页展示出来. 这时就想到利用Echarts这个开源项目,但是Djang ...
- layui上传文件前端报404，实际文件已经上传成功
原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 第一种 在后台上加上@ResponseBody 第二种 @ResponseBody @Request ...
- 巨蟒django之权限9:前端展示修改删除合并&&权限展示
1.权限组件控制流程(硬核重点) 2.权限组件控制流程 3.角色管理 4.删除合并 5.权限展示
- 查找存在某字符的文件列表，不包括svn文件
find . ! -wholename '*.svn*' -print | xargs grep "img" | awk -F ':.' '{print $1}' | uniq
- idea引入项目下所有文件（ps：包括静态文件夹）
打开项目的目录结构 点击finish 最后删除目录下多余的src就可以了
- 【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例
<body><textarea id='a' rows=100 cols=300>result:</textarea>><script>var a ...
- FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑
FFmpeg_Tutorial FFmpeg工具和sdk库的使用demo 一.使用FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑 1.基本介绍 对于每一个从事音视频技术开发的工程师,想必没 ...
随机推荐
- 给本地web项目配置域名
给本地的web项目配置一个域名 通常访问本地问项目时,使用localhost:port/projectname或者127.0.0.1:port/projectname来实现.我们可以通过配置tomca ...
- SpringBoot1.X /2.X使用@Component注解注入为java.lang.NullPointException 问题小结
问题简述: 我们在使用Spring系的产品的时候总是想当然的以为所有指定的Bean都会让Spring来管理,其实不然,即使是Spring出品的产品也不全是的哦,以下是我遇到的一个使用@Componen ...
- vue实现动态绑定class--（三目运算符）根据span数字内容改变其样式
一.根据span数字内容改变数字本身样式(两种样式) <template> //使用三目运算符,判断当span的val是否小于0给其不同的class名 <span class=&qu ...
- 5-7 学生cpp成绩统计
完成“学生cpp成绩计算”之后,修改Person和Student类,各自增加两个无参构造函数. 仍以Person类为基础,建立一个派生类Teacher,增加以下成员数据: int ID;//教师工号 ...
- VSTO外接程序项目只用1个文件实现Ribbon CustomUI和CustomTaskpane定制【VB.Net版】
VSTO中的自定义功能区和自定义任务窗格需要用到各种命名空间.添加所需文件,才能实现.后来我发现可以把所有代码都写在ThisAddin.vb这个默认文件中. 大家可以在Visual Studio中创建 ...
- android形状属性、锁屏密码、动态模糊、kotlin项目、抖音动画、记账app、视频播放器等源码
Android精选源码 直观了解Android的"形状"属性如何影响Drawable的外观. 一个灵活的视频播放器, 可替换播放器内核. android锁屏输入密码功能源码 背景动 ...
- 学习python-20191203-Python Flask高级编程开发鱼书_第02章 Flask的基本原理与核心知识
视频01: 做一个产品时,一定要对自己的产品有一个明确的定位.并可以用一句话来概括自己产品的核心价值或功能. 鱼书网站几个功能 1.选择要赠送的书籍,向他人赠送书籍(价值功能,核心价值的主线): 2. ...
- python学习笔记（6）数据类型-集合
集合(set)是一个无序的不重复元素序列. 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须用 set() 而不是 { },因为 { } 是用来创建一个空字典. 创建格 ...
- IntelliJ IDEA 的便捷操作性
快捷键 说明 IntelliJ IDEA 的便捷操作性,快捷键的功劳占了一大半,对于各个快捷键组合请认真对待.IntelliJ IDEA 本身的设计思维是提倡键盘优先于鼠标的,所以各种快捷键组合层出不 ...
- mysql表关联问题（第三卷：外键多对多)
现在我们整理一下多对多的问题,举个例子现在一个男的可能和多个女的谈过恋爱,一个女的也可能和多个男的谈过恋爱,把他们恋爱的关系整理为数据关联表就成为了多对多的关系. 准备三张表,男人信息表,女人信息表, ...