django中使用KindEditor上传图片

1、创建app01, 并在settings.py里面设置

2、创建一个视图app01/views/test,用于响应KindEditor界面显示的Get请求

from django.shortcuts import render, HttpResponse
from django.http import  JsonResponse
import  os
from kindeditor_pro import  settings

# Create your views here.

def test(request):
    if request.method == "POST":
        content = request.POST.get("content")
        return render(request, "test2.html", locals())
    return render(request, "test.html")

配置对应的路由

urlpatterns = [
    url(‘admin/‘, admin.site.urls),
    url(‘test/‘, views.test),

]

访问http://127.0.0.1:8080/test/效果如下:

3、项目中创建media文件夹,  设置media媒体路径,首先,要设置后端代码对media访问的路径

在settings.py里面添加一行:

MEDIA_ROOT = "media"

然后,要开放前端在浏览器里面中访问media的url, 需要在路由urls.py里面配置如下:

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import  serve
from kindeditor_pro import  settings
import os

urlpatterns = [
    url(‘admin/‘, admin.site.urls),
    url(‘test/‘, views.test),
    url(‘upload/‘, views.upload_img),

    #手动添加对外开放的后端服务器资源
    url(r"^media/(?P<path>.*)", serve, {"document_root": settings.MEDIA_ROOT}),
    url(r"^media/(?P<path>.*)", serve, {"document_root": os.path.join(settings.MEDIA_ROOT, "editor") }),
]

这里配置了两个路径,代码开放根路径 media , 并且开放media下面的editor文件夹, 如果不写editor路由,那只能访问media根目录下的文件,无权限访问media下的其他文件夹;

测试一下 media对前端访问的url权限是否开放,可以在media下放置一个test2.PNG文件,然后在浏览器里面访问:http://127.0.0.1:8080/media/test2.PNG/, 如下,访问到了代码权限开放成功;

然后测试下media/editor权限是否开放成功,在media/editor下放置一个文件test1.PNG, 在浏览器中输入:http://127.0.0.1:8080/media/editor/test1.PNG/ ,如下代表访问成功:

4、编写templates.html中, KindEditor上传文件的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="POST">
    {%  csrf_token %}
    <textarea name="content" id="editor_id" ></textarea>
    <input type="submit" value="submit">
</form>
</body>

<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js" ></script>
<script>
    KindEditor.ready( function (k) {
        window.editor = k.create(
            "#editor_id",
            {  width: "60%",
               height:"650px",
               resizeType: 0,
               uploadJson : "/upload/",
                extraFileUploadParams :{
                    ‘csrfmiddlewaretoken‘: "{{ csrf_token }}",
                },
            },
        );
    } );

</script>

</html>

5、编写后端响应图片上传的视图

from django.shortcuts import render, HttpResponse
from django.http import  JsonResponse
import  os
from kindeditor_pro import  settings

# Create your views here.

def test(request):
    if request.method == "POST":
        content = request.POST.get("content")
        return render(request, "test2.html", locals())
    return render(request, "test.html")

def upload_img(request):
    response_dic = {}
    file_obj = request.FILES.get("imgFile")
    if file_obj:
        #把文件上传后,放在
        path = os.path.join( settings.BASE_DIR, "media", "editor" )
        if not os.path.exists( path):
            os.mkdir(path)
        file_path = os.path.join(path, file_obj.name )
        with open(file_path, "wb") as f:
            for line in file_obj:
                f.write( line )
        response_dic["error"] = 0
        response_dic["url"] = "/media/editor/%s" % file_obj.name
    return JsonResponse( response_dic )
    # return  HttpResponse("OOOOOk")

设置路由

from django.conf.urls import url
from django.contrib import admin
from app01 import views
from django.views.static import  serve
from kindeditor_pro import  settings
import os

urlpatterns = [
    url(‘admin/‘, admin.site.urls),
    url(‘test/‘, views.test),
    url(‘upload/‘, views.upload_img),

    #手动添加对外开放的后端服务器资源
    url(r"^media/(?P<path>.*)", serve, {"document_root": settings.MEDIA_ROOT}),
    url(r"^media/(?P<path>.*)", serve, {"document_root": os.path.join(settings.MEDIA_ROOT, "editor") }),
]

上传图片后,效果如下:

上传错误,效果如下:

原文地址:https://www.cnblogs.com/harryTree/p/11886504.html

时间: 2024-11-05 22:32:33

django中使用KindEditor上传图片的相关文章

django中,kindeditor存到数据库的html,到了前台被html标签被自动转义的解决办法

1,使用kindeditor进行了上传图片功能,存储到后台的html代码为: <img src="/static/content_img/img_2015-07-21-024421.jpg"  />KindEditor 2,我把这个unicode字符串返回到前台的模板,结果显示了html代码: <img src="/static/content_img/img_2015-07-21-024421.jpg"  />KindEditor 3,自己

django中上传图片的写法(转)

view参数 @csrf_exemptdef before_upload_avatar(request):    before = True    return render_to_response('accounts/before_upload_avatar.html',                              {'before': before},                              context_instance=RequestContext(re

kindeditor上传图片自动压缩过大的图片

kindeditor上传图片时自动将过大(像素以及图片长宽)的图片进行压缩,只需要在kindeditor中upload_json.ashx里面修改! <%@ webhandler Language="C#" class="Upload" %> /** * KindEditor ASP.NET * * 本ASP.NET程序是演示程序,建议不要直接在实际项目中使用. * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置. * */ using Sys

asp.net中使kindeditor自动生成缩略图

kindedtor编辑器,确实很好用,但是也有很多的不足,比如,我们经常用的图片上传功能,首页如果有图片新闻或者需要显示宿略图的时候,你会发现它并没有提供图片上传自动生成缩略图的功能 ,于是,花了一点时间,对它的上传图片的功能进行了改写,废话少说,直接上代码 图片上传功能调用的是:upload_json.ashx  代码如下 复制代码 using System; using System.Collections; using System.Web; using System.IO; using

kindeditor上传图片

kindeditor上传本地图片 (2013-11-07 14:52:51)转载▼ 标签: kindeditor 本地上传 整理一下后台代码 @Action(value = "uploadFile") public String uploadFile(){ try { //文件保存目录路径    img_upload是服务器存储上传图片的目录名 String savePath = request.getSession().getServletContext() .getRealPath

在DWZ框架中整合kindeditor复文本框控件

今天上午在DWZ框架中整合kindeditor复文本框控件,发现上传图片是老是提示 “上传中,请稍候...”,上网查看别人说可能是文件路径问题,在想以前在其他项目中用这个控件一直没问题,到这里怎么会出现这个错误呢? 于是从源头一路查找过去, 找到上传配置 uploadJson: '/Scripts/kindeditor-4.1.4/asp.net/upload_json.ashx',于是打开上传文件的upload_json.ashx文件,发现context.Response.Write(Json

Django中ORM介绍和字段及其参数

ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中. ORM在业务逻辑层和数据库层之间充当了桥梁的作用. ORM的由来 字母‘O’起源于“对象”(Object),'R'代表“关系”(Relational). 几乎所有的软件开发过程中都会涉及到对象和关系数据库.在用户层面和业务逻辑层

Django中的Admin站点

使用Admin站点 假设我们要设计一个新闻网站,我们需要编写展示给用户的页面,网页上展示的新闻信息是从哪里来的呢?是从数据库中查找到新闻的信息,然后把它展示在页面上.但是我们的网站上的新闻每天都要更新,这就意味着对数据库的增.删.改.查操作,那么我们需要每天写sql语句操作数据库吗? 如果这样的话,是不是非常繁琐,所以我们可以设计一个页面,通过对这个页面的操作来实现对新闻数据库的增删改查操作.那么问题来了,老板说我们需要在建立一个新网站,是不是还要设计一个页面来实现对新网站数据库的增删改查操作,

Django中的app及mysql数据库篇(ORM操作)

Django常见命令 在Django的使用过程中需要使用命令让Django进行一些操作,例如创建Django项目.启动Django程序.创建新的APP.数据库迁移等. 创建Django项目 一把我们都新建一个文件夹来存放项目文件,切换到这个目录下,启动命令行工具.创建一个名为mysite的Django项目: django-admin startproject mysite 创建好项目之后,可以查看当前目录下多出一个名为mysite的文件夹,mysite的文件夹目录结构如下: mysite/ ma