给Django后台富文本编辑器添加上传文件的功能
使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request。既然是一个request,就需要urls.py进行转发请求views.py进行处理。views.py处理完了返回一个文件所在的路径给富文本编辑器,富文本编辑器通过HTML来渲染文件,如果文件是图片,就显示图片。
以下以simditor富文本编辑器为例。它上传文件的api是这样的:
#upload要么为false 要么为对象
upload:{
url: '',
params: null,
fileKey: 'upload_file',
connectionCount: 3,
leaveConfirm: 'Uploading is in progress, are you sure to leave this page?'
}
需要返回的JSON格式:
{
"success": true/false,
"msg": "error message", # optional
"file_path": "[real file path]"
}
第1步:在settings.py建立MEDIA的全局变量
#settings.py
MEDIA_URL='/uploads/'
MEDIA_ROOT=os.path.join(BASE_DIR,'uploads')
第2步:配置富文本编辑器JS文件
upload:{
url:'/myadmin/upload/files', /* 注意myadmin前面的斜杠不能省掉,这是相对于根目录的*/
filekey:'upload_file', /* 相当于html标签里面的name值 */
}
第3步:配置urls.py
#urls.py
from blog.upload_proc import upload_file
urlpatterns+=[
url(r'^myadmin/upload/(?P<dir_name>)',upload_file)
]
第4步:撰写upload_file处理函数
#upload_proc.py
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.conf import settings
import json
import os
import datetime
@csrf_exempt #取消csrf验证,否则会有403错误
def file_upload(request,dir_name):
files=request.FILES.get('upload_file') #得到文件对象
today=datetime.datetime.today()
file_dir=settings.MEDIA_ROOT+dir_name+'/%d/%d/%d/'%(today.year,today.month,today.day)
if not os.path.exists(file_dir):
os.makedirs(file_dir)
file_path=file_dir+files.name
open(file_path,'wb+').write(files.read()) #上传文件
#得到JSON格式的返回值
upload_info={"success":True,'file_path':settings.MEDIA_URL+files.name}
upload_info=json.dumps(upload_info)
return HttpResponse(upload_info,content_type="application/json")
第5步:再次配置urls.py
为什么需要再次配置urls.py
呢?因为文本编辑器虽然返回了已经上传的文件的地址,但是要显示在页面上,实际上又是一次request。凡是request
,都需要urls.py
转发给views.py
进行处理。
#urls.py
from django.conf import settings
#django.views.static.serve是内置的,但是只能在开发中使用,生产环境中需要交给服务器来处理,因为上传的文件已经属于静态文件了。
urlpatterns+=[
url(r'^uploads/(?P<path>.*)$',diango.views.static.serve,{'document_root':settings.MEDIA_ROOT})
]
扩展:一次性上传多个文件,如上传多张图片
- simditor采用的方法是利用ajax请求多次,有几个文件就请求几次。
- 有没有其他的方法呢?
给Django后台富文本编辑器添加上传文件的功能的更多相关文章
- layui 魔改:富文本编辑器添加上传视频功能
甲方又整新需求了:富文本编辑器需要可以传视频. layui本身的富文本编辑器没有传视频的功能,所以,又到了咱们魔改的时候了. 友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没 ...
- bbs项目富文本编辑器实现上传文件到media目录
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...
- Python3+Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记9(发送富文本信息及上传文件处理)'''from seleni ...
- 关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
- Kindeditor JS 富文本编辑器图片上传指定路径
js //================== KindEditor.ready(function (K) { var hotelid = $("#hotelid").val(); ...
- [原创]Python/Django使用富文本编辑器XHeditor上传本地图片
前言 为了在Django框架下使用Xheditor上传图片,居然折腾了我一个晚上.期间也遇到种种问题,网上相关资料极少.现在把经验分享给大家. 正文 xheditor篇 1.下载http://xhed ...
- kindeditor富文本框,上传文件后,显示文件名称
kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...
- 使用django表单,使网页添加上传文件,并分析文件。
开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...
- 编写Java程序,实现客户端向服务端上传文件的功能
查看本章节 查看作业目录 需求说明: 实现客户端向服务端上传文件的功能 当启动服务端后,运行客户端程序,系统提示客户在客户端输入上传文件的完整路径.当客户在客户端输入完成后,服务端实现文件上传 实现思 ...
随机推荐
- 解决Access denied for user ''@'localhost' to database 'mysql'问题
在改动mysql的root用户password后,再登陆,提示如标题的错误,找了一番答案之后,最终解决,过程例如以下: 1.停掉mysql: service mysqld stop 2.使用 ...
- iPhone开发秘籍(第2版)--具体书签版
http://download.csdn.net/download/fksec/4872499
- js生成唯一的uuid
---恢复内容开始--- 在做项目的时候出现这样的一种情况,需要动态生成唯一的uuid,刚开始我的思路是这样的,我可以根据时间来做,然后出现了下面的思路: var uuid = "cms&q ...
- 解决Maven项目 Missing artifact jdk.tools:jdk.tools:1.7的错误
因学习项目需要,在pom.xml添加hbase-client依赖的时候提示解决Maven工程中报 Missing artifact jdk.tools:jdk.tools:1.7的提示信息,之前遇到这 ...
- MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得。
MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得. 之前的项目比较简单,多是用JSP .Servlet + JDBC 直接搞定,在项目中尝试用 Strut ...
- java-I/O File类(5)-Reader和Writer、OutputStreamWriter 、BufferedWriter、字节流和字符流的区别
标签: outputstreamwriterreader字符file方法 2015-05-14 23:06 469人阅读 评论(0) 收藏 举报 分类: 孙鑫-java基础(16) I-O(4 ...
- linux -- ubuntuserver 安装图形界面
安装Gnome桌面 1.安装全部桌面环境,其实Ubuntu系列桌面实际上有几种桌面应用程序,包括Ubuntu-desktop.Kubunut-desktop和Xubuntu- desktop. 我们就 ...
- HttpModule的简单示例
1.HttpModule可用在asp.net 管线事件触发的过程中.. 可处理一些通用的操作,如给特定请求加 gzip压缩. 2.示例代码: using System; using System.We ...
- ajax 请求登录超时跳转登录页的示例代码
Ajax AJAX即“Asynchronous Javascript + XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 在Filter里判断是否登录,如果未 ...
- Linux JAVA 配置
wget http://download.oracle.com/otn-pub/java/jdk/7u25-b15/jdk-7u25-linux-x64.tar.gz tar zxvf jdk-7u2 ...