kindeditor上传图片php,kindeditor图片上传功能
KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框
使用到官网下载 KindEditor 最新版本,解压后将所有文件拷贝到项目的static文件夹下。注意,可以根据需要删除以下目录:asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
HTML模板中需要显示富文本编辑器的位置添加标签:文章内容
添加脚本,引入KindEditor JS文件,为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数:
var options = {
resizeType: 0,
uploadJson: "/upload/", //指定图片上传的url路径,server端写一个视图来处理上传的图片
extraFileUploadParams: { "csrfmiddlewaretoken": "{{ csrf_token }}"
}
};
KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器
说明:图片上传要通过uploadJson参数指定上传的url路径
extraFileUploadParams参数用于提交csrf验证
图片的上传和预览流程:在富文本编辑器中选择上传图片
KindEditor 将图片通过AJAX的方式上传到服务器指定url
该url对应的视图函数保存图片,并返回包含图片服务器路径的json响应
KindEditor 拿到响应的图片路径后,通过标签的src属性,显示预览图片
Django中的代码实现:from django.conf.urls import urlfrom app import views
urlpatterns = [
url(r'^upload/$', views.upload_file, name='upload_file'),
url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 配置media路由]def upload_file(request):
# 拿到文件,保存在指定路径
print(request.FILES) # {'imgFile': []}
imgFile = request.FILES.get('imgFile') # 拿到文件对象,imgFile.name, 拿到文件名
with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 无法创建文件夹,需要自己创建
for chunk in imgFile.chunks():
f.write(chunk) # 返回json响应
response = {
'error': 0, 'url': '/media/upload/img/'+imgFile.name # 客户端拿到路径,才能预览图片; media在setting中配置了别名,这里只写media,客户端就可以找到路径,前面不需要加/app
} return HttpResponse(json.dumps(response))
说明:request.FILES中拿到图片对象
imgFile.name拿到文件名
必须返回包含error和url的json响应
定义保存图片的视图函数
配置media(参考博客)并定义路由
kindeditor上传图片php,kindeditor图片上传功能相关推荐
- php隐藏做上传图片,php做图片上传功能
无标题文档 文件上传 /> //js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 function PreviewImage(fileObj, ...
- (转)淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
- ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
- Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的主 ...
- ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
- 织梦dedecms广告管理增加广告图片上传功能
织梦的广告位管理是一个不错的插件内部插件,但是dedecms的广告管理功能稍微有点次,不能直接上传图片生成图片链接 本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自 ...
- 关于微信内置浏览器,打开图片上传功能,调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题 前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
- PHP实现图片上传功能
PHP实现图片上传功能: 第一个页: picupload.php 代码如下: <form action="picop.php" method="post" ...
- Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传 限制上传类型 & 多选: ① accept 属性只能与 配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
- 纯前端实现图片上传功能
纯前端实现图片上传功能,告别后端formData上传 使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能 了解了upload的基本属性之后我们要开始上硬菜了 使用ElementU ...
最新文章
- mysql 数据库快照迁移_快照方式备份mysql 数据库
- mysql order by 多字段排序
- Open3D:Win10 + VS2017配置Open3D(C++、python)
- HTTPS协议原理分析
- node jsonwebtoken
- jvm感知docker容器参数
- redirect java 配置_Java从后台重定向(redirect)到另一个项目的方法
- mysql 5.5 分区_MySQL 5.5 表分区功能增强
- winhex使用简介
- win7计算机高级还原,win7怎么恢复出厂设置 win7恢复出厂设置方法【图文】
- ubuntu20.04系统安装u盘制作方法
- ASP.NET 安全认证(三)—— 用Form 表单认证实现单点登录(Single Sign On)
- 互联网之子:亚伦·斯沃茨
- OpenFOAM 粘弹性流体求解器rheoTool
- 直播系统解决方案:直播平台如何开发搭建
- 深信服科技公司2008校园招聘笔试题
- Linux内核中断系统处理机制-详细分析
- 初学C语言一些知识点的整理
- 高可用架构的设计方法
- vue3bug-Invalid vnode type when creating vnode: null.