django 发帖时碰到的图片上传
所用编辑器 【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 发帖时碰到的图片上传的更多相关文章
- django + ckeditor + 七牛云,图片上传到七牛云
传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.
- Django中怎么做图片上传--图片展示
1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...
- 百度编辑器contentChange监听不到图片上传
将ueditor组件化到java项目中,当调用组件后,绑定函数,监听contentchange如下图: um.addListener("contentChange",functio ...
- layui图片上传之后后台如何修改图片的后缀名以及返回数据给前台
const pathLib = require('path');//引入node.js下的一个path模块的方法,主要处理文件的名字等工作,具体可看文档 const fs = require(''fs ...
- Django配置图片上传
本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL 和 MEDIA_ROOT 在 D:\blog ...
- kindeditor更改图片上传时网络图片的路径
当我们想要使用kindeditor的图片上传功能时,有两种选择图片方式,一种是本地选择,一种是在图片空间中选择,图片空间的默认地址是server上的/kindeditor/attached/image ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- 配置django图片上传与保存展示
近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...
- django之创建第10-1个项目-图片上传并记录上传时间
1.百度云盘:django之创建第10-1个项目-图片上传并记录上传时间 2.主要修改的配置文件有3个,forms.views和models3个文件以及html 3.forms.py文件修改 #cod ...
随机推荐
- 让Chrome浏览器抓包接口数据秒变 python 代码
简介 uncurl是一个库,允许您将curl请求转换为使用requests 的python代码.由于Chrome网络检查器具有的“copy as cURL”,因此该工具对于用python重新创建浏览器 ...
- k8s、jenkins集成
参考连接 http://www.uml.org.cn/jchgj/201804252.asp https://huanqiang.wang/2018/03/30/Jenkins-Gitlab-Kube ...
- HTML用table布局排版 padding清零
之前博文:HTML布局排版2如何设置div总是相对于页面居中 中是用div进行排版的,div是切了三条,顶部的图片,下部的图片,中间的平铺条,中间的div不设高度,根据内容,该区域的大小不固定,便于后 ...
- 解决HTM或HTML的图标
HTM和HTML的文件图标不能正常显示,显示为无关联应用程序的白板图标,搞了很久都没能解决,最后综合了几种方法才“搞定”她!出现这种情况的原因可能是安装了某些软件(比如OFFICE.FIREFOX)后 ...
- ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)
背景: 使用ajax提交form表单时,提交按钮的type值写为了submit,导致ajax中回调函数中的提示信息toastr.success('提交数据成功');没有执行,只执行了alert语句 , ...
- 【GStreamer开发】GStreamer播放教程07——自定义playbin2的sink
目标 通过手动选择音频和视频的sink,playbin2可以进一步定制.这允许使用playbin2的应用在解码后可以自行做最终的渲染和显示.本教程展示了: 如何替换playbin2选择的sink 如何 ...
- mysql 基本操作及对用户操作
1.登录/退出基本操作 登录:mysql [-h服务器地址] -u登录名 -P端口号 -p 或登录:mysql [--host=服务器地址] --user ...
- linux 下安装docker
Linux 下的 Docker 安装与使用 一.安装与配置 安装一些必要的系统工具: sudo yum install -y yum-utils device-mapper-persistent-da ...
- SFTP客户端与服务端
什么是 SFTP ? 在了解 SFTP 之前,我们先看看什么是 FTP . FTP( File Transfer Protocol )文件传输协议,是一种常用来在两终端系统之间传输文件的方法. SFT ...
- [Asp.Net Core] - 设置 Syncfusion / RichTextEditor 移除超链接及高度自适应 的方法
背景 使用 Syncfusion / RichTextEditor 对录入后的信息进行展示:1. 希望内容高度自适应.2. 希望禁用原文中的超链接. 实现 <div class=" ...