[原創]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))