Django中扩展TinyMCE使其支持图片上传功能
2013-06-13 09:03
633 查看
1. 在/tiny_mce/plugins/advimage/image.htm中添加/修改代码
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.form.js"></script>
。。。
<script type="text/javascript">
function func_upload_image(){
if($('#id_upload_file').val()==''){
alert('请选择要上传的图片@');
return false;
}
$('#id_insert_image_form').ajaxSubmit({
beforeSubmit:function(){},
success: function(html, status){
//alert(html);
var result = html.replace("<PRE>", "");
result = result.replace("</PRE>", "");
if (html.indexOf("格式") > 0) {
alert(result);
return;
}
$("#src").val(result);
ImageDialog.showPreviewImage($("#src").val());
return;
}
});
}
</script>
将form标记改为
<form id="id_insert_image_form" onsubmit="ImageDialog.insert();return false;" action="/upload_image/" method="post" enctype="multipart/form-data">
在图片URL输入框下加入表格行:
<tr>
<td colspan="2"><input type="file" class="mceFocus" name="upload_file" id="id_upload_file" />
<input type="button" class="updateButton" onclick="func_upload_image();" value="上传"/></td>
</tr>
2. 在views.py中添加支持代码:
#===============================================================================
#在TinyMCE中扩展支持图片上传的功能(并生成120*120的缩略图)
#===============================================================================
from PIL import Image, ImageFile
from cms.models import Article
from datetime import *
from django.conf.global_settings import STATIC_ROOT, STATIC_URL
from django.http.response import HttpResponse
from django.shortcuts import render_to_response
from django.views.decorators.csrf import csrf_exempt
from dxnyy.settings import IMAGES_UPLOAD_DIR,IMAGES_UPLOAD_TEMP_DIR
import os
@csrf_exempt
def upload_image(request, encoding='utf-8'):
if request.method == 'POST':
if "upload_file" in request.FILES:
f = request.FILES["upload_file"]
parser = ImageFile.Parser()
for chunk in f.chunks():
parser.feed(chunk)
img = parser.close()
# 在img被保存之前,可以进行图片的各种操作,在各种操作完成后,在进行一次写操作
dt = datetime.now()
cur_dir = '%s_%s_%s' % (dt.year, dt.month, dt.day)
file_path = os.path.join(IMAGES_UPLOAD_TEMP_DIR[0], cur_dir)
if not os.path.exists(file_path):
os.mkdir(file_path)
file_name = '%s_%s_%s' % (dt.hour, dt.minute, dt.second)
thumb_fn = file_name + '_min'
4000
f = os.path.join(file_path, file_name)
tf = os.path.join(file_path, thumb_fn)
new_img = img.resize((120, 120), Image.ANTIALIAS)
new_img.save(tf + '.jpg', 'JPEG')
img.save(f + '.jpg', 'JPEG')
return HttpResponse('%s/%s/%s.jpg' % ("http://127.0.0.1:8000/static/uploads", cur_dir, file_name))
return HttpResponse(u"Some error!Upload faild!格式:jpeg")
3. urls.py中添加:
(r'^upload_image/', views.upload_image),
4. settings.py中添加:
IMAGES_UPLOAD_TEMP_DIR = (
"E:\\soft\\eclipse\\eclipse-jee-indigo-SR2-win32\\workspace\\dxnyy\\static\\uploads\\",
)
IMAGES_UPLOAD_DIR = 'uploads'
5. TinyMCE的初始化配置中,Plugins中加入:advimage
如:'plugins': "advimage",
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.form.js"></script>
。。。
<script type="text/javascript">
function func_upload_image(){
if($('#id_upload_file').val()==''){
alert('请选择要上传的图片@');
return false;
}
$('#id_insert_image_form').ajaxSubmit({
beforeSubmit:function(){},
success: function(html, status){
//alert(html);
var result = html.replace("<PRE>", "");
result = result.replace("</PRE>", "");
if (html.indexOf("格式") > 0) {
alert(result);
return;
}
$("#src").val(result);
ImageDialog.showPreviewImage($("#src").val());
return;
}
});
}
</script>
将form标记改为
<form id="id_insert_image_form" onsubmit="ImageDialog.insert();return false;" action="/upload_image/" method="post" enctype="multipart/form-data">
在图片URL输入框下加入表格行:
<tr>
<td colspan="2"><input type="file" class="mceFocus" name="upload_file" id="id_upload_file" />
<input type="button" class="updateButton" onclick="func_upload_image();" value="上传"/></td>
</tr>
2. 在views.py中添加支持代码:
#===============================================================================
#在TinyMCE中扩展支持图片上传的功能(并生成120*120的缩略图)
#===============================================================================
from PIL import Image, ImageFile
from cms.models import Article
from datetime import *
from django.conf.global_settings import STATIC_ROOT, STATIC_URL
from django.http.response import HttpResponse
from django.shortcuts import render_to_response
from django.views.decorators.csrf import csrf_exempt
from dxnyy.settings import IMAGES_UPLOAD_DIR,IMAGES_UPLOAD_TEMP_DIR
import os
@csrf_exempt
def upload_image(request, encoding='utf-8'):
if request.method == 'POST':
if "upload_file" in request.FILES:
f = request.FILES["upload_file"]
parser = ImageFile.Parser()
for chunk in f.chunks():
parser.feed(chunk)
img = parser.close()
# 在img被保存之前,可以进行图片的各种操作,在各种操作完成后,在进行一次写操作
dt = datetime.now()
cur_dir = '%s_%s_%s' % (dt.year, dt.month, dt.day)
file_path = os.path.join(IMAGES_UPLOAD_TEMP_DIR[0], cur_dir)
if not os.path.exists(file_path):
os.mkdir(file_path)
file_name = '%s_%s_%s' % (dt.hour, dt.minute, dt.second)
thumb_fn = file_name + '_min'
4000
f = os.path.join(file_path, file_name)
tf = os.path.join(file_path, thumb_fn)
new_img = img.resize((120, 120), Image.ANTIALIAS)
new_img.save(tf + '.jpg', 'JPEG')
img.save(f + '.jpg', 'JPEG')
return HttpResponse('%s/%s/%s.jpg' % ("http://127.0.0.1:8000/static/uploads", cur_dir, file_name))
return HttpResponse(u"Some error!Upload faild!格式:jpeg")
3. urls.py中添加:
(r'^upload_image/', views.upload_image),
4. settings.py中添加:
IMAGES_UPLOAD_TEMP_DIR = (
"E:\\soft\\eclipse\\eclipse-jee-indigo-SR2-win32\\workspace\\dxnyy\\static\\uploads\\",
)
IMAGES_UPLOAD_DIR = 'uploads'
5. TinyMCE的初始化配置中,Plugins中加入:advimage
如:'plugins': "advimage",
相关文章推荐
- django admin后台接入tinymce并且支持图片上传
- django中tinymce添加图片上传功能
- Extjs 扩展Htmleditor,支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能
- Extjs 扩展Htmleditor,支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能(2)
- Extjs 扩展Htmleditor,支持 图片上传 文件上传 插入flash 插入多媒体 插入层 插入横线等功能
- TinyMCE 新增本地图片上传功能
- 在angular2中使用tinymce富文本编辑,并实现上传图片功能
- Twitter支持上传图片功能
- sharepoint 2010 扩展富文本框上传图片功能extend InputFormTextBox for uploading image
- 安卓选择图片上传功能 - 支持多选拍照预览等
- jsp图片上传支持预览功能
- TinyMCE 新增本地图片上传功能
- Django1.10 扩展User属性增加头像上传功能
- TinyMCE 新增本地图片上传功能
- TinyMCE 新增本地图片上传功能
- Joomla!扩展制作实例教程-模板展示组件-增加后台上传图片功能 【转】
- 扩展fckeditor的上传图片和上传文件功能!
- Ext4.x之HtmlEditor扩展图片上传功能
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
- Django在admin后台集成TinyMCE富文本编辑器添加上传图片功能