bbs项目富文本编辑器实现上传文件到media目录
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录
# Django用户上传的文件都放在media目录下
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR,"media")
我们这样设置了,django还是找不到我们的media目录,还需要在路由系统系统设置,我们这里在django的一级路由中设置
首先需要导入2个模块
from django.conf import settings
from django.views.static import serve
然后定义路由映射的关系,这个是固定写法
url(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),
然后我们就可以使用media目录存储我们上次的文件,django就可以找到这个目录下的文件了
先看下我们的富文本编辑器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap-theme.css">
</head>
<body>
<h2>{{ auther }}个人博客站点管理后台</h2> <h3>文章标题</h3>
<form method="post" enctype="multipart/form-data" action="">
{% csrf_token %} <label for="article_id"></label><input type="text" id="article_id" placeholder="文章标题" name="new_article_name">
<h3>文章内容</h3>
<textarea name="new_article_content" cols="70" rows="20" id="editor_id"> </textarea>
<input type="submit" value="提交" class="btn btn-success">
</form> <script src="/static/jq/jquery-3.3.1.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
{#<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>#}
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
width : '1200px',
item:[
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
uploadJson:"/app1/upload/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
filePostName:"upload_img"
});
});
</script>
</body>
</html>
前端的效果是
这里我们点击上传文件,看下后台的视图函数的处理,把上传的文件写到media目录中,然后把写的图片的地址返回到前端,富文本编辑器就会去找media中找到对应的路径,然后渲染到前台页面上
from bbs import settings
from django.http import JsonResponse
import os
def upload(request):
print(settings.MEDIA_ROOT,type(settings.MEDIA_ROOT))
file_obj = request.FILES.get("upload_img")
upload_path = os.path.join(settings.MEDIA_ROOT,"upload",file_obj.name)
with open(upload_path,"wb") as f:
for line in file_obj:
f.write(line) res={
"error":0,
"url":"/media/upload/"+file_obj.name
} return HttpResponse(json.dumps(res))
我们看下media目录下就有我们上传的文件了
由于我们在django的路由系统设置了media的路由映射关系,所以我们都可以直接通过页面访问我们的图片
bbs项目富文本编辑器实现上传文件到media目录的更多相关文章
- 给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request.既然是一个request,就需要urls.py进行转发请求views.py进行处理.views.py处理完了返回一个文件所在的 ...
- Python3+Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...
- layui 魔改:富文本编辑器添加上传视频功能
甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...
- 关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- kindeditor富文本框,上传文件后,显示文件名称
kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...
- SpringBoot项目打成jar包后上传文件到服务器 目录与jar包同级问题
看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传文件存放会变得非常简单,因为你可以随意操作项目路径下的资源.但是当你使用Sp ...
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...
随机推荐
- leetcode ex3 找出穿过最多点的直线 Max Points on a Line
题目 https://oj.leetcode.com/problems/max-points-on-a-line/ 答案与分析 http://www.aiweibang.com/yuedu/18326 ...
- nginx+php 开启https
nginx 配置如下,配置好重启nginx,不是nginx -s reload,如果还不能访问肯定就是防火墙问题,关闭防火墙再试试. 我遇到的问题是:我服务器是ecs,域名解析到阿里云复杂均衡的,结果 ...
- 【367】通过 python 实现 SVM 硬边界 算法
参考: 支持向量机整理 SVM 硬边界的结果如下: $$min \quad \frac{1}{2} \sum_{i=1}^m\sum_{j=1}^m \alpha_i\alpha_jy_iy_j \v ...
- genymotion使用学习
1 安装 直接去其官网(https://www.genymotion.com/#!/download)下载安装包安装即可,安装中会附带安装VirtualBox. 2 注册 必须使用帐号登录后,方可下载 ...
- IE9及以下版本获取上传文件的大小
IE9及以下版本不能识别files属性:获取图片需要设置浏览器 打开IE_工具_internet选项_安全_自定义级别. 启用ActiveX,开启跨域: var fso=new ActiveXobje ...
- delphi 大文件的读写 使用 MapviewOffile
unit filemap; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- 24.Hibernate-各种类型的查询.md
目录 1.查询的类别 2.实例 1.查询的类别 按照查询的方式分为面向对象和非面向对象 面向对象 HQL查询:面向对象方式,可以跨数据库,但是需要SQL基础.最常用的方式.查询的对象是类和类的属性,不 ...
- Structs复习 Result第二部分
1.动态结果 2.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app versio ...
- List,Set,Map集合的遍历方法
List的三种实现:ArrayList(数组) LinkedList(链表) Vector(线程安全) List集合遍历方法: List<String> list = new Arra ...
- Hadoop集群(二) HDFS搭建
HDFS只是Hadoop最基本的一个服务,很多其他服务,都是基于HDFS展开的.所以部署一个HDFS集群,是很核心的一个动作,也是大数据平台的开始. 安装Hadoop集群,首先需要有Zookeeper ...