[原创]Python/Django使用富文本编辑器XHeditor上传本地图片

前言

为了在Django框架下使用Xheditor上传图片，居然折腾了我一个晚上。期间也遇到种种问题，网上相关资料极少。现在把经验分享给大家。

正文

xheditor篇

1.下载http://xheditor.com/

2.将其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三个文件夹copy到xheditor目录下。注：如果您网站中没有使用jQuery框架，也请一并上传jquery文件夹中的jquery-1.4.4.min.js

(上传文件域名字为：filedata
返回结构必需为json，并且结构如下：{"err":"","msg":"200906030521128703.gif"})



3.在相应html文件的</head>之前添加

<script src="/static/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/static/xheditor/xheditor-1.1.14-zh-cn.min.js" type="text/javascript"></script>

4.在您的页面初始JS代码里加上：

<script type="text/javascript">
$(function(){
$('#txt_notes').xheditor({width:'800',height:'300',upImgUrl:"/admin/upload/",upImgExt:"jpg,jpeg,gif,png"});
})
</script>

Python&Django篇

先看下项目的结构图



1.settings.py配置

MIDDLEWARE_CLASSES中注释(否则出现403错误)
#'django.middleware.csrf.CsrfViewMiddleware',

import os
MEDIA_ROOT = os.path.join(os.path.dirname(__file__),"travels").replace('\\','/')

2.urls.py 配置

url(r'^admin/upload/$','wetrip.views.upload.upload_image'),
url(r'^static/(?P<path>.*)$','django.views.static.serve',
{'document_root': "/目录/static/"}),
url(r'^pictures/(?P<path>.*)$','django.views.static.serve',
{'document_root': "/目录/travels/pictures"}),

3.上传主要代码

upload.py
#coding=utf-8
from django.http import HttpResponse
from django.utils import simplejson
import time,os
import datetime as dt
import wetrip.settings

#允许上传文件类型
ALLOW_SUFFIX =['.jpg','.png','.jpeg','.gif']
#目录创建
def create_dir():
today = dt.datetime.today()
dir_name = '/pictures/%d/%d/%d' %(today.year,today.month,today.day)
if not os.path.exists(wetrip.settings.MEDIA_ROOT + dir_name):
os.makedirs(wetrip.settings.MEDIA_ROOT + dir_name)
return dir_name

def upload_image(request):
dir_name = create_dir()
if 'HTTP_CONTENT_DISPOSITION' in request.META:#chrome/firefox Xheditor使用的是Html5方式上传
disposition = request.META['HTTP_CONTENT_DISPOSITION']
image_name_suffix = disposition[ disposition.rindex('.') : disposition.rindex('"') ]
data = request.body #request.raw_post_data#已过时
return write_data(data,image_name_suffix,dir_name,True)
else:#普通上传，ie
if 'filedata' in request.FILES:
image_name = request.FILES["filedata"].name
image_name_suffix = image_name[image_name.rindex('.') : ]
return write_data(request.FILES["filedata"],image_name_suffix,dir_name,False)
else:
return HttpResponse(simplejson.dumps({'err':'未选择文件','msg':''},ensure_ascii = False))

#保存图片
def write_data(data,image_name_suffix,dir_name,html5):
if image_name_suffix in ALLOW_SUFFIX:
image_name = str(int(time.time())) + image_name_suffix
try:
with open(wetrip.settings.MEDIA_ROOT + dir_name+'/'+ image_name,'wb') as destination:
if html5:
destination.write(data)#写文件流
else:
for c in data.chunks():
destination.write(c)
return HttpResponse(simplejson.dumps({'err':'','msg':dir_name+'/'+image_name},ensure_ascii = False))
except Exception,e:
return HttpResponse(simplejson.dumps({'err':e.message,'msg':''},ensure_ascii = False))
else:
return HttpResponse(simplejson.dumps({'err':'上传格式不准确!只支持jpg,png,jpeg,gif','msg':''},ensure_ascii = False))