所用编辑器 【wangEditor.js】

图片上传接口 '/edit/image/' 返回内容  参照 https://www.kancloud.cn/wangfupeng/wangeditor3/335782

# 2018_12_29 日更新

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>wangEditor demo</title>

</head>

  <script type="text/javascript">

function modifyContent() {

var introduce = document.getElementById("introduce");

introduce.value = editor.txt.html();

}

</script>

<body>

<form action="" method="post" onsubmit="modifyContent()">

<div>

<!-- 编辑器编辑，提交时执行js，获得编辑器的内容，赋值给textarea，用于向后台提交存入数据库 -->

<textarea rows="5" cols="35" name="usIntroduce" style="display:none;" id="introduce"></textarea>

<div id="editor">

{#        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>#}

        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p><p><img src="/static/upload/cart.png" style="max-width:100%;"></p>

</div>

        <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->

        <script type="text/javascript" src="/static/wangEditor.js"></script>

        <!-- 设置全屏功能的两个js文件，先引入jquery-3.2.1.min.js，在引入wangEditor-fullscreen-plugin.js -->

       

        <script type="text/javascript">

            var E = window.wangEditor

            var editor = new E('#editor')

            /* 处理上传图片的controller路径 */

             editor.customConfig.uploadImgServer = '/edit/image/'

                                                                                                        /* 定义上传图片的默认名字 */

             editor.customConfig.uploadFileName = 'myFileName'

            // 或者 var editor = new E( document.getElementById('editor') )

            editor.create()

            //初始化全屏插件

        </script>

</div> 

<input type="submit" value="提交"></input>

    {% csrf_token %}

</form>

</body>

</html>

---前端代码

from django.shortcuts import render,HttpResponse

from django.http import JsonResponse

from django.views.decorators.csrf import csrf_exempt

from suibi1.settings import upload_img

import os

# Create your views here.

def index(request):

    if request.method=='GET':

        return render(request,'index.html')

    elif request.method=="POST":

        print(request.POST.get('usIntroduce'))

        return HttpResponse('提交成功')

@csrf_exempt

def image(request):

    if request.method=="POST":

        a = request.FILES['myFileName']

        name = a.name

        with open(os.path.join(upload_img,name),'wb') as f:

            f.write(a.file.read())

            print('图片写入成功')

            return JsonResponse({"errno": 0, "data":[os.path.join('/static/upload',name),]})

--django_views

django 发帖时碰到的图片上传的更多相关文章

  1. django + ckeditor + 七牛云，图片上传到七牛云

    传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.

  2. Django中怎么做图片上传--图片展示

    1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...

  3. 百度编辑器contentChange监听不到图片上传

    将ueditor组件化到java项目中,当调用组件后,绑定函数,监听contentchange如下图: um.addListener("contentChange",functio ...

  4. layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台

    const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...

  5. Django配置图片上传

    本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog ...

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

    当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...

  7. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  8. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  9. django之创建第10-1个项目-图片上传并记录上传时间

    1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #cod ...

随机推荐

  1. 算法习题---5-8图书管理系统*****<双向迭代器>（UVa230）

    一:题目 就是输入一系列书本名和作者名,然后输入命令模拟借书和还书,再输出归还的书的摆放位置.要求有两点: 需要对归还的书做特殊排序处理:作者名相同,则书本按书名从小到大排序:否则书本按作者名大小排序 ...

  2. RabbitMQ 入门教程(PHP版) 第一部分:Hello World

    abbitMQ是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件投递到你的收件人处.在这个比喻中,RabbitMQ是一个邮箱.邮局.邮递 ...

  3. Delphi XE中使用dbExpress连接MySQL数据库疑难问题解决

    Delphi IDE中包含一个Data Explorer的组件,如下图所示: 该组件基于dbExpress(包含TSQLConnection.TSQLDataSet.TSQLQuery.TSQLSto ...

  4. Intellij IDEA集成mybatis-generator插件自动生成数据库实体操作类

    Intellij IDEA集成mybatis-generator插件自动生成数据库实体操作类 转载至:https://blog.csdn.net/fishinhouse/article/details ...

  5. 03点睛Spring MVC 4.1-REST

    转发:https://www.iteye.com/blog/wiselyman-2214290 3.1 REST REST:Representational State Transfer; REST是 ...

  6. 常见问题:MySQL/B+树

    平衡二叉树 此前讲红黑树时也提到了平衡二叉树,红黑树和AVL树都是能保证树不退化的平衡二叉树,平衡二叉树采用二分思想组织数据,能大大提高单点查找数据的效率,其组装过程略. 作为对比,此处也列出平衡二叉 ...

  7. Spring MVC如何获取请求中的参数

    目录 一.获取URL中路径参数 1.1 @PathVariable 注解 1.2 @PathParam 注解 二.获取请求参数: 2.1 GET请求 2.1.1 获取请求中的单个参数:@Request ...

  8. 安装本地 jar 文件

    Maven 提供了 maven-install-plugin 可将 jar 文件安装至本地 repository.安装命令如下: mvn install:install-file -Dfile= -D ...

  9. ubuntu18.04 阿里镜像源

    备份:cp /etc/apt/sources.list /etc/apt/sources.list.bak 清空source.list:echo > /etc/apt/sources.list ...

  10. cuda-convnet在Ubuntu12.04+CUDA5.5下的配置

    deep learning近年来非常之火,尤其是在IMAGENET上的识别效果更是惊呆了小伙伴,其所用的Hinton的学生编写的cuda-convet代码早已公开,但是一直没有时间去仔细研究,最近趁着 ...