kindeditor 图片上传

视图函数

CONTENT = ""
from app01.forms import ArticleForm
def wangzhe(request):
    if request.method == "GET":
        obj = ArticleForm()
        return render(request,‘wangzhe.html‘,{‘obj‘:obj})
    else:
        obj = ArticleForm(request.POST)
        if obj.is_valid():
            content = obj.cleaned_data[‘content‘]
            global CONTENT
            CONTENT = content
            print(content)
            return HttpResponse(‘...‘)

def see(request):

    return render(request,‘see.html‘,{‘con‘: CONTENT})

def upload_img(request):
    import os
    upload_type = request.GET.get(‘dir‘)
    file_obj = request.FILES.get(‘imgFile‘)
    file_path = os.path.join(‘static/imgs‘,file_obj.name)
    with open(file_path,‘wb‘) as f:
        for chunk in file_obj.chunks():
            f.write(chunk)

    dic = {
        ‘error‘: 0,
        ‘url‘: ‘/‘ + file_path,
        ‘message‘: ‘错误了...‘
    }
    import json
    return HttpResponse(json.dumps(dic))

前端页面

<body>
    <form method="POST" action="/wangzhe.html" novalidate>
        {% csrf_token %}
        <p>
            文章标题
            {{ obj.title }}
        </p>

        <div>
            <div>文章内容</div>
            <div>
                {{ obj.content }}
            </div>
        </div>
        <input type="submit" value="提交" />
    </form>
    <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script>

    <script>
        KindEditor.create("#i1",{
            width: "700px",
            height: "300px",
            resizeType:1,
            uploadJson: ‘/upload_img.html‘,
            extraFileUploadParams:{
                "csrfmiddlewaretoken":"{{ csrf_token }}"
            }
        })
    </script>

</body>

原文地址:http://blog.51cto.com/sgk2011/2112175

时间: 2024-10-27 08:33:40

kindeditor 图片上传的相关文章

kindeditor图片上传 struts2实现

一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\jsp\lib下有 三.以下列出部分核心代码,如需要全部源码可点击下载(待上传) JSP <textarea id="editor_id" name="content" style="width:950px;height:300px;"> 这

KindEditor图片上传到七牛云

自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法: 版本说明: KindEditor版本:4x 七牛SDK:7.x.x 后端脚本:PHP 先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须

MVC 中使用kindEditor 图片上传在IE 上进行上传出现的问题

在IE 上使用KindEditor 进行单张图片上传的时候会出现一个下载安全警告,这样将会造成图片上传失败,出现的错误页面: 将会出现这样的一个警告信息. 解决方案,: 是将上传的UpdataloadDetailsImg 方法的返回值 修改为 void 错误代码: public ActionResult UpdateloadDetailsImg() { string imageRemotePath = this.UploadImg(); if (!string.IsNullOrWhiteSpac

Kindeditor图片上传Controller

asp.net MVC Kindeditor 图片.文件上传所用的Controller 1 [HttpPost, AllowAnonymous] 2 public ActionResult UploadImage() 3 { 4 string savePath = VirtualPaths.ImgDir + "/Upload/"; 5 string saveUrl = "/Upload/"; 6 string fileTypes = "gif,jpg,jp

KindEditor图片上传

KindEditor参数配置 <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content"]', { uploadJson : '{{asset('/blue_cross_admin/article/uploads')}}', allowFileManager : false, items:['source', '|', 'fullscreen', 'undo'

Django配置图片上传

本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog_project  下建立文件夹 uploads MEDIA_URL = '/uploads/' # 上传图片的路径:D:\blog_project\uploads MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') # 上传图片的根路径 BASE_DIR:

kindeditor更改图片上传时网络图片的路径

当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是服务器上的/kindeditor/attached/image/下面. 如果想要改变这个路径,需要找到/kindeditor/php/file_manager_json.php这个文件,然后可以看到下面几行: //根目录路径,可以指定绝对路径,比如 /var/www/attached/ $root_path = $php_path . '../attached/';

使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法

近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中,要求尽快实现. 我们在项目中使用的在线编辑器是Kindeditor4.1.10,它们的多文件上传插件是使用Flash实现的,原本应该就是能使用的,但为什么老是显示上传失败的,百度了一下前人的经验和教训,出现这种情况,有两种可能:1)上传的目标文件夹没有写权限,导致上传的文件无法进行写操作,所以上传

kindeditor扩展粘贴图片功能&amp;修改图片上传路径并通过webapi上传图片到图片服务器

前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功能 kindeditor修改图片上传路径并通过webapi上传图片到图片服务器(支持分布式图片) 结果演示 1.扩展粘贴图片功能演示 2.修改图片上传路径演示: 我们的网站演示地址是:http://localhost:9393/ 我们的图片服务器地址是:http://localhost:9394/