kindeditor删除上传图片并且删除服务器里面的图片

微信⼩程序实现上传多张图⽚、删除图⽚最近在做微信⼩程序，遇到上传多张图⽚到服务器，计算上传图⽚的张数，并且可以⼿动删除图⽚，下⾯是效果图效果图：本来⽤的是⼩程序提供的 mp-uploader 上传图⽚的组件，⽆奈次组件删除效果不是我想要的，只能⽤ wx.chooseImage进⾏上传图⽚，在使⽤uplaodFile将图⽚发送给后台服务器。

下⾯直接展⽰代码：wxml:<view class="con_titles"><view class="con_left"><image src="../../images/comint.png"></image><text class="titles_t">患者病历</text></view><view class="img_num">{{imgShow.length}}/6</view></view><view class="page__bd"><!-- <mp-uploader style='color:#353535' bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="6" title="患者病历"></mp-uploader> --> <view class="add-image"><view class="images-boxc" wx:for="{{imgShow}}" wx:for-item="item" wx:key="image"><image class="image_size" data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image><image class="delete-image" data-index="{{index}}" src="../../images/delete_img.png" bindtap="deleteImage"></image></view><view class="images-add" wx:if="{{imgShow.length<6}}"><image class="image_size image_sizen" src="../../images/add_img.png" bindtap="chooseImage"></image></view></view></view>wxss:/* 上传图⽚ */.images-boxc {position: relative;border: dashed 1px #bfbfbf;width: 139rpx;height: 139rpx;margin-right: 32rpx;margin-bottom: 32rpx;}.delete-image {position: absolute;width: 30rpx;height: 30rpx;right: 16rpx;top: 16rpx;}.add-image {display: flex;flex-wrap: wrap;}.image_size {width: 139rpx;height: 139rpx;}.image_sizen {height: 142rpx;}js:data: {count: 6, //设置最多6张图⽚allImg: [],imgShow: [],},// 上传图⽚chooseImage: function() {wx.showLoading({title: '加载中...',mask: true})var that = this;var imgShow = that.data.imgShow;var count = that.data.count - imgShow.length; //设置最多6张图⽚wx.chooseImage({count: count,sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认⼆者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认⼆者都有success: function(res) {console.log(res)that.uplaodFile(res)for (var i = 0, h = res.tempFilePaths.length; i < h; i++) {imgShow.push(res.tempFilePaths[i]);that.setData({imgShow: imgShow})}wx.hideLoading({title: '加载中...',mask: false})}})},// 删除图⽚deleteImage(e) {let self = this;let index = e.target.dataset.index;let imgShow = self.data.imgShow;let allImg = self.data.allImg;allImg.splice(index, 1);imgShow.splice(index, 1);this.setData({imgShow: imgShow,allImg: allImg})},previewImage: function(e) {console.log(this.data.files)wx.previewImage({current: e.currentTarget.id, // 当前显⽰图⽚的http链接urls: this.data.files // 需要预览的图⽚http链接列表})},selectFile(files) {console.log('files', files)// 返回false可以阻⽌某次⽂件上传},uplaodFile(files) {console.log('upload files', files)let that = thisfiles.tempFilePaths.forEach(element => {util.uploadFile('/fastdfsServer/fileUpload', element, 'file', {}, function(res) { //上传本地图⽚地址到服务器返回地址存放到input提交时取值 res = JSON.parse(res);if (res.responseCode == 0) {sysMsg.sysMsg("上传成功", 1000, 'success');that.setData({allImg: that.data.allImg.concat(res.responseBody)});} else {sysMsg.sysMsg("上传失败", 1500, 'error');}});});// ⽂件上传的函数，返回⼀个promisereturn new Promise((resolve, reject) => {resolve({urls: files.tempFilePaths});setTimeout(() => {reject('some error')}, 10000)})},uploadError(e) {console.log('upload error', e.detail)},uploadSuccess(e) {// this.setData({// allImg: this.data.allImg.concat(e.detail.urls[0])// });console.log('upload success', e.detail, e.detail.urls)},为⼤家推荐现在关注度⽐较⾼的微信⼩程序教程⼀篇：⼩编为⼤家精⼼整理的，希望喜欢。

详细介绍如何使用kindEditor 编辑器今天群里的朋友问我能不能写个kindEditor 编辑器的使用教程，说是弄了半天没有搞定。

由于PHP 啦后台正好用了这个编辑器，我有写经验，正好教他的同时写出来分享给大家kindEditor 编辑器是一个由JS 写成的在线编辑器，很多网站或CMS 等都有用它，口碑不错，目前最新版本是4.1.10。

其实它的用法非常简单，我是在下载了它的安装包后看了一些demo 然后就把它放到PHP 啦的后台上去了。

好了教程正式开始一、下载下载最新版本的kindEditor （官方网站 ），下载后打开examples/index.html 就可以看到一排例子。

二、部署将解压后的文件包kindeditor-4.1.10里的asp jsp php 这几个带有服务端脚本的文件夹删除，然后上传到你网站的相应目录中，在这里我假设放到了plugin 目录。

三、嵌入在需要加入编辑器的页面的HTML 中倒入1 <link rel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css" /> 2 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/kindeditor-min.js"></script>3 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script> 然后添加一个输入框1 <textarea id="editor_id" name="content"></textarea>最后在加入一段JS1 KindEditor.ready(function(K) {2 window.editor = K.create('#editor_id',{3 cssPath:'/public/plugin/editor/plugins/code/prettif y.css',4 uploadJson:'/upload/image.php',5 resizeType :1,6 allowPreviewEmoticons : true,7 allowImageUpload : true,8 });9 });好了。

Python遍历文件夹，保留png图片，删除其他文件，并生成日志。

本module包含以下功能1.列举当前文件夹下的文件夹。

用户选择序号，选择要清理的文件夹。

2.遍历选择的文件夹，保留png图片，其他文件删除3.使用logging模块记录清理的日志。

本模块的日志功能，必须在同文件夹下创建日志配置文件（logging.conf）。

[loggers]keys=root,applog[handlers]keys=rotateFileHandler[formatters]keys=applog_format[formatter_applog_format]format=[%(asctime)s - %(name)s]%(levelname)s: %(message)s- %(filename)s:%(lineno)d[logger_root]level=NOTSEThandlers=rotateFileHandler[logger_applog]level=NOTSEThandlers=rotateFileHandlerqualname=simple_example[handler_rotateFileHandler]class=handlers.RotatingFileHandlerlevel=NOTSETformatter=applog_formatargs=('log_1.log', 'a', 10000, 9)filter_png.py#!/usr/bin/env p ython#coding=utf-­‐8## * 摘 要：实现遍历文件夹，保留png图片，删除其他文件，并生成日志。

# * 主要有以下特点：# * 1. 根据日期创建日志文件目录，每天的日志分别存放在不同的日志目录中； # * 2. 遍历文件夹；# * 3. 保留png，并清除其他文件；# *# * p ython版本：2.x# * 作 者：Jeffrey M a# * 完成日期：2014年5月20日#from __future__ i mport d ivisionimport s ys, o s, s tatimport s hutilimport I mageimport l oggingimport l ogging.config#import t kFileDialogglobal t otalCount, p ngCounttotalCount = 0cleanCount = 0def w alk(path, c allback):global t otalCount, c leanCountfor i tem i n o s.listdir(path):subpath = o s.path.join(path, i tem)mode = o s.stat(subpath)[stat.ST_MODE]if s tat.S_ISDIR(mode):print("folder %s " % s ubpath)walk(subpath, c allback)elif s tat.S_ISREG(mode):totalCount += 1if n ot(subpath.endswith('png')):callback(subpath)else:print 'Skipping %s' % s ubpathdef p urgeNotPng(file):global c leanCounttry:fsize = o s.path.getsize(file)cleanCount += 1print("removed: %d b ytes : %s " % (fsize, f ile))os.chmod(file, s tat.S_IREAD|stat.S_IWRITE)os.remove(file) # 删除操作("removed: %d b ytes : %s " % (fsize, s ubpath))except I OError:passif __name__ == '__main__':#日志初始化LOG_FILENAME = 'logging.conf'logging.config.fileConfig(LOG_FILENAME)logger = l ogging.getLogger("filterpng")#测试代码# l ogger.debug("debug m essage")# l ("info m essage")# l ogger.warn("warn m essage")# l ogger.error("error m essage")# l ogger.critical("critical m essage")if l en(sys.argv) != 2:print ('Usage: p ython %s p ath' % s ys.argv[0][sys.argv[0].rfind(os.sep)+1:])for i ndex, i tem i n e numerate(os.listdir(os.getcwd())):subpath = o s.path.join(os.getcwd(), i tem)mode = o s.stat(subpath)[stat.ST_MODE]if s tat.S_ISDIR(mode):print("[%d] %s" % (index, i tem))selection = r aw_input("Select t he a bove n umber:")if s election.isdigit():try:folders = o s.listdir(os.getcwd())folder = f olders[int(selection)]walk(os.path.join(os.getcwd(), f older), p urgeNotPng)except I ndexError:passelse:print (sys.argv[1])userSelection = r aw_input("yes o r n o?:\n") if u serSelection == "yes":walk(sys.argv[1], p urgeNotPng)print 'total: %d / %d' % (cleanCount, t otalCount)。

kindeditor用法详解
kindeditor是一个基于JavaScript的富文本编辑器，它具有简单易用、功能强大、兼容性好等特点。

下面是对kindeditor用法的一些详细解释。

一、引入kindeditor
在使用kindeditor之前，需要先引入kindeditor的库文件。

可以通过下载kindeditor的压缩包，或者通过CDN引入kindeditor。

例如，通过CDN引入kindeditor的代码如下：
二、创建kindeditor编辑器
在HTML中创建一个textarea元素，并为其指定一个id或class，然后通过JavaScript代码将其转换为kindeditor编辑器。

例如，将id为"editor"的textarea元素转换为kindeditor编辑器的代码如下：
三、使用kindeditor编辑器
使用kindeditor编辑器非常简单，可以通过调用editor对象的方法来执行各种操作。

以下是一些常用的方法：
1.获取编辑器内容：
2.设置编辑器内容：
3.插入图片：
4.插入链接：
5.获取焦点：
6.执行其他操作：
kindeditor还提供了许多其他方法，例如删除选中内容、查找和替换文本、设置样式等。

可以参考kindeditor的官方文档或示例代码来了解更多用法。

编辑器使用方法1. 下载编辑器下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: /down.php2. 部署编辑器解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/Note您可以根据需求删除以下目录后上传到服务器。

∙asp - ASP程序∙ - 程序∙php - PHP程序∙jsp - JSP程序∙examples - 演示文件3. 修改HTML页面1.在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content"style="width:700px;height:300px;">&lt;strong&gt;HTML内容&lt;/strong&gt;</textarea>Note∙id在当前页面必须是唯一的值。

∙在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML 特殊字符(>,<,&,”)。

具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、 、PHP、JSP。

∙在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。

宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。

2.在该HTML页面添加以下脚本。

<script charset="utf-8" src="/editor/kindeditor.js"></script><script charset="utf-8" src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K) {editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。

图片文件夹地址是：admin/img 数据表是new 图片字段是：img下面代码就是删除不了文件夹里面的图片<%Function DeleteFile(FileName)FileName=server.MapPath(FileName) '必须转换成绝对路径的dim FsoSet Fso = CreateObject("scripting.filesystemobject")if Fso.FileExists(Filename) then '判断文件是否存在Fso.DeleteFile filenameend ifSet Fso = nothingEnd Function%><%id=request("id")set rs=server.createobject("adodb.recordset")sql="select * from new where id="&idrs.open sql,conn,1,3DeleteFile(rs("img"))rs.deleters.updaters.closeset rs=nothing%>最佳答案你好，你的问题还是你的路径问题，我在你的代码上稍作修改，就可以了，代码如下：<!--#include file="xh_conn.asp"--><%Function DeleteFile(FileName)aaa="img/"&FileNamebbb=server.MapPath(aaa) '必须转换成绝对路径的dim FsoSet Fso = CreateObject("scripting.filesystemobject")if Fso.FileExists(bbb) then '判断文件是否存在Fso.DeleteFile(bbb)end ifSet Fso = nothingEnd Function%><%id=request("id")set rs=server.createobject("adodb.recordset")sql="select * from [new] where id="&idrs.open sql,conn,1,3DeleteFile(rs("img"))rs.deleters.updaters.closeset rs=nothingresponse.redirect "xh_add.asp"%>以上代码经测试是没问题的~ASP删除记录同时删除图片代码...asp编程 2009-09-16 11:00:13 阅读72 评论1 字号：大中小订阅现在ASP网页在上传图片时大部分都是用无组件上传，把图片上传到一个文件夹，然后把路径保存到数据库一个字段中，那么在删除记录时只是把相应的数据库记录删除掉了，相关的图片还会保留在服务器的文件下，会有好多无用的图片占用着空间，想删除记录时把相关图片也删掉怎么办？以下代码可以实现，但必须服务器得支持FSO组件（大多数服务器都可用）删除图片函数，当然也可以删除其它文件了<%Function DeleteFile(FileName)FileName=server.MapPath(FileName) '必须转换成绝对路径的dim FsoSet Fso = CreateObject("scripting.filesystemobject")if Fso.FileExists(Filename) then '判断文件是否存在Fso.DeleteFile filenameend ifSet Fso = nothingEnd Function%>比如说：你的数据库中news表字段PIC存放着图片路径，删除时不要用直接的删除sql语句了，那样无法获取PIC值<%id=request("id")set rs=server.createobject("adodb.recordset")sql="select * from news where id="&idrs.open sql,conn,1,3DeleteFile(rs("pic"))rs.deleters.updaters.closeset rs=nothing%>如果批量删除记录可以做循环调用DeleteFile函数<%id=request("id")set rs=server.createobject("adodb.recordset")sql="select * from news where id in('"&id&"')'不止一个IDrs.open sql,conn,1,3do while not rs.eofDelFile(rs("pic"))rs.deleters.movenextlooprs.updaters.closeset rs=nothing%>本删除适合表中PIC字段只存放一张图片的情况下删除文章同时删除图片，如果多个字段中存放图片，可以在DelFile(rs("pic"))接着加DelFile(rs("pic1"))，DelFile(rs("pic2"))。

kindEditor的简介及一些问题处理一、简介：KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera 等主流浏览器。

KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。

KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布 2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。

二、资产监督管理系统中的应用：2.1 在资产监督管理系统中的具体界面：在资产监督管理系统中，信息发布中具体信息的信息内容就使用了kindEditor来实现，具体界面如下图：界面中主要应用了字体，文字颜色，字体背景，字体大小等通用的字体编辑方法和排版格式，还应用了发送表情的方法。

2.2具体的实现方法：资产质量监督管理系统前台界面主要是通过jsp实现，信息发布也不例外。

调用时需要将lang，themes，plugins三个文件夹都拷贝在jsp文件的目录下。

具体的方法调用如下，其中，items后的内容为具体的编辑功能引用，items之前的为kindEditor 的调用及一些属性的设置。

相关jsp界面中对js的调用有以下两条：kindeditor-min.js主要是kindEditor调用的具体方法。

其中：_version可以看到当前kindEditor的版本信息；k.opitons中包含了该kindEditor所有的默认配置及属性。

Items中为所提供的所有编辑功能。

langType 为各功能的语言显示类型，minWidth，minHeight为编辑器的大小配置，fullScreenMode为是否全屏显示，colorTable中可添加具体字体颜色，fontSizeTable中可添加所需要的字体大小，htmlTags下可进行tags 的各个属性的配置更改。

Thinkphp编辑器扩展类使用方法一，使用前的准备。

使用前请确认你已经建立好了一个Thinkphp网站项目。

1，Keditor.class.php和JSON.class.php 是编辑器扩展类文件，将他们复制到你的网站项目的ThinkPHP\Lib\ORG\Net 文件夹下。

2，editor文件夹是kindeditor的核心包。

将其复制到你项目的Public文件夹下（和入口文件同级的那个Public）,并在Public下再建立一个Upload文件夹，用于存放使用编辑器上传的图片。

3，KeditorAction.class.php是编辑器的上传图片功能和浏览远程图片功能，将其复制到你项目的lib\Action 文件夹下。

二，对象的调用在控制器方法中调用对象：import(".Keditor");$ke=new Keditor();$ke->id="content";//指定textarea的id$keshow=$ke->show();//生成js代码$this->assign("keshow",$keshow);$this->display();在方法对应的模版文件中显示编辑器：<html><head>{$keshow}</head><!--输出js，建议放在head--><body><form id="form1" name="form1" method="post" action=""><textarea name="content" id="content" cols="70" rows="20"><!-文本域，id为content--></textarea><input name="img" id="img" type="hidden" value="" /><!--隐藏域存储编辑器上传的图片地址，id为img--></form></body></html>上面的是最简单的调用方法，扩展类还有很多属性和方法。

js控件Kindeditor实现图⽚⾃动上传功能Kindeditor本⾝提供了许多⾮常实⽤的插件，由于代码开源，开发⼈员可以根据需要对其进⾏任意扩展和修改。

在使⽤Kindeditor编辑⽹站内容时考虑这样⼀个场景：编辑⼈员往往会从其它页⾯或者Word⽂档将内容复制到Kindeditor编辑器中，⽽不会从⼀张⽩纸开始编写内容。

如果所复制的内容中包含图⽚，则需要⾸先将图⽚从源地址下载到本地，然后将其上传到本⽹站所在的服务器，否则图⽚仍然会指向你所复制的页⾯或者⽂档，这会导致图⽚可能在页⾯中⽆法正确打开。

编辑⼈员往往要处理许多的⽂档，这样的操作⽆疑⾮常繁琐。

能否让Kindeditor⾃动识别粘贴到其中的内容，并将图⽚⾃动上传到服务器呢？下⾯的代码实现了这⼀功能。

有关如何在页⾯中使⽤Kindeditor可以去查看官⽅⽹站的⽂档，这⾥不再详细介绍。

实现该功能的基本思路：在Kindeditor编辑器的keyup事件中添加代码，以检查编辑器的内容中是否包含图⽚；找出需要⾃动上传到服务器的图⽚，通过Ajax⽅式调⽤图⽚上传程序将图⽚上传到服务器；在Ajax的回调函数中将对应图⽚的src地址修改为本地相对地址。

该功能不⽀持将Word中的图⽚复制出来并上传到服务器。

上图是最终实现效果。

程序会⾃动识别编辑器中的内容，如果有图⽚需要上传，则会在编辑器的顶部显⽰⼀条提⽰信息。

⽤户点击“上传”链接，程序会通过Ajax请求调⽤图⽚上传程序，并在回调函数中将对应图⽚的src地址修改为本地相对地址。

具体实现步骤及相关代码：1. Kindeditor编辑器修改找到kindeditor.js⽂件，在keyup()事件中添加⾃定义代码。

不同版本的Kindeditor所提供的代码差别可能会⽐较⼤，需要借助于官⽅⽂档进⾏查找。

本⽂基于Kindeditor 4.1.10版本。

2. auto.js⽂件代码function df() {var haspicContainer = document.getElementById("has_pic");if (haspicContainer == null) {haspicContainer = document.createElement("div");haspicContainer.id = "has_pic";haspicContainer.innerHTML = "<input type='text' id='piclist' value='' style='display:none;'/><div id='upload'><b>您有图⽚需要上传到服务器</b>&nbsp;&nbsp;<a href='javascript:uploadpic();' >上传</a></div><div id='confirm'></div>"; $(".ke-toolbar").after(haspicContainer);}var img = $(".ke-edit-iframe").contents().find("img");var piccount = 0;var sstr = "";$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {piccount++;if (i == $(img).length - 1)sstr += that.attr("src");elsesstr += that.attr("src") + "|";}});$("#piclist").val(sstr);document.getElementById("has_pic").style.display = (piccount > 0) ? "block" : "none";}function closeupload() {$("#has_pic").hide();$("#upload").show();}function uploadpic() {var piclist = encodeURI($("#piclist").val());if (piclist.length == 0) return false;$.ajax({url: "/uploadpic.ashx",data: "pic=" + piclist,type: "GET",beforeSend: function () {$("#upload").hide();$("#confirm").text("正在上传中...");},success: function (msg) {if (msg !== "") {var str = new Array();str = msg.split('|');var img = $(".ke-edit-iframe").contents().find("img");$(img).each(function (i) {var that = $(this);if (that.attr("src").indexOf("http://") >= 0 || that.attr("src").indexOf("https://") >= 0) {that.attr("src", "/uploads/image/" + str[i]);that.attr("data-ke-src", "/uploads/image/" + str[i]);}});$("#confirm").html(img.length + "张图⽚已经上传成功！&nbsp;&nbsp;<a href='javascript:closeupload();'>关闭</a>");}else $("#confirm").text("上传失败！");}});}其中的$(".ke-edit-iframe").contents().find("img")⽤来查找编辑器内容中的所有图⽚。

KindEditor使用手册一简单使用方法1. 把所有文件上传到程序所在目录下，例如：http://你的域名/editor/。

2. 在此目录下创建attached文件夹，并把权限改成777。

3. 要添加编辑器的地方加入以下代码。

（原来的TEXTAREA或其它编辑器可以先注释。

）这里[]里的内容要根据你的实际情况修改。

-----------------------------------------------------------------------<input type="hidden" name="[原TEXTAREA名字]" value="[这里放你要编辑的内容]"><script type="text/javascript" charset="utf-8" src="[JS路径]/KindEditor.js"></script><script type="text/javascript">var editor = new KindEditor("editor"); //创建编辑器对象editor.hiddenName = "[原TEXTAREA名字]";editor.editorWidth = "[编辑器宽度,例如：700px]";editor.editorHeight = "[编辑器高度,例如：400px]";editor.show(); //显示//提交时获得最终HTML代码的函数function KindSubmit() {editor.data();}</script>-----------------------------------------------------------------------4. FORM的onsubmit属性里添加KindSubmit()函数。

使⽤AntDesign的Upload上传删除预览照⽚，以及上传图⽚状态⼀直处于upload。

⼀、界⾯构建 1、创建index⽗组件import React from "react";import { Form } from "antd";import UploadComponent from "./UploadComponent";export default () => {const [form] = eForm();return (<Formform={form}initialValues={{'uploadPhoto': []}}><Form.Item name="uploadPhoto"><UploadComponent /></Form.Item></Form>);}; 2、创建UploadComponent⼦组件import React, { useState, useEffect } from "react";import { Upload } from 'antd';import { PlusOutlined } from "@ant-design/icons";export default (props: any) => {console.log(props)const [fileList, setFileList] = useState<any>([]) //展⽰默认值const handleChange = ({ file, fileList }: any) => {};const uploadButton = (<div><PlusOutlined /><div className="ant-upload-text">Upload</div></div>);return (<UploadlistType="picture-card"fileList={fileList}onChange={handleChange}action={'这⾥是你上传图⽚的地址'}>{fileList.length >= 8 ? null : uploadButton}</Upload>);}; 这样⼀个简单界⾯就构造完成了，通过打印⼦组件的props，我们可以看到，⽗组件给⼦组件通过prop传递了⼀个对象，该对象中有value：⼦组件的默认值，id：FormItem的name，onChange：onChange事件注：1、Form表单以及Upload请参考Ant Design官⽅⽂档 2、因后台返回数据格式不同，所以fileList的设置也不同，本⽂仅供参考。

引用:/yanghbmail/blog/item/6fc7beec9531e33462d09f2a.htm lkindEditor完整认识 PHP上调用并上传图片说明。

2011年02月03日星期四 20:26最近又重新捣鼓了下kindeditor，之前写的一篇文章/yanghbmail/blog/item/c681be015755160b1d9583e7.htm l感觉有点不太全面细致，所以今天再重新写下。

此文所述KE版本为当前2011年2月3日 20:10:18最新版KindEditor 3.5.2 先看下目录结构我使用的是PHP 所以黄色区域的文件夹是可以删除的。

重命名为:kindeditor看下我的WWW目录：这里的关键文件就是图中的两个其它我划掉的是我自己的文件夹-----------------dome.php----------------------<?php$htmlData = '';if (!empty($_POST['content1'])) {if (get_magic_quotes_gpc()) {echo '上面的';$htmlData = stripslashes($_POST['content1']);} else {echo '下面的';$htmlData = $_POST['content1'];}}?><!doctype html><html><head><meta charset="utf-8" /><title>KindEditor PHP</title><link rel="stylesheet" href="./kindeditor/examples/index.css" /> //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php<script charset="utf-8" src="./kindeditor/kindeditor.js"></script> //此处的引入文件位置路径为相对于该PHP文件的位置此为demo.php<script>KE.show({id : 'content1',imageUploadJson : '../../php/upload_json.php', //<<相对于kindeditor3.5.5\plugins\image\image.htmlfileManagerJson : '../../php/file_manager_json.php', //<<相对于kindeditor3.5.5\plugins\file_manager\file_manager.htmlallowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['example'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['example'].submit();});}});</script></head><body class="ke-content"><?php echo $htmlData; ?><form name="example" method="post" action="demo.php"><textarea id="content1" name="content1" cols="100" rows="8"style="width:700px;height:200px;visibility:hidden;"><?php echo htmlspecialchars($htmlData); ?></textarea><br /><input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)</form></body></html>注意上面的4处红色文件的位置。

kindeditor的使用一、KindEditor介绍KindEditor是一款开源的web编辑器，由Javascript开发而成。

它支持网页编辑、图片上传和flash播放，也支持表情符号等特殊功能，使用起来非常方便，大大提高了文章的编辑效率。

二、KindEditor的功能1、支持多种文件上传格式：支持jpg、jpeg、png、gif、bmp等多种格式的图片上传，也支持doc、txt、xls等office文档的上传；2、支持Flash播放：支持swf格式的flash文件的播放，可以将flash文件插入到文章中；3、支持表情：支持表情符号的插入；4、支持滚动条：可以自定义滚动条的样式和速度；5、支持插入文件：可以插入html、css 、js等文件。

三、KindEditor的使用1、下载并解压KindEditor压缩包，在页面中引入kindeditor.js 文件；2、在需要使用KindEditor的地方插入一个<textarea>标签；3、实例化KindEditor：//实例化编辑器var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name='content']', {tresizeType : 1,tallowPreviewEmoticons : false,tallowImageUpload : false,titems : [tt'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',tt'removeformat', '|', 'justifyleft', 'justifycenter','justifyright', 'insertorderedlist',tt'insertunorderedlist', '|', 'emoticons', 'image','link']});});4、提交表单：当提交表单时，调用 KindEditor.sync() 将编辑器中的内容同步到 textarea 中。

multipartfile解决上传⽂件后，图⽚⾃动删除的问题你按这⼏个步骤去做，就能解决问题：1.把/tomcat/webapps/⽬录清空，删掉该⽂件夹的所有内容，2.修改/tomcat/conf/web.xml⽂件:Java code1234 5 6 7 8 9 10 11 12 13defaultclass>org.apache.catalina.servlets.DefaultServletclass> debuglistingstrue13.修改/tomcat/conf/server.xml⽂件:Java codeunpackWARs="true"xmlValidation="false" xmlNamespaceAware="false"> 12345678 9 10 11 12 13 14 15 16 17 18 19"localhost" appBase="webapps"unpackWARs="true"autoDeploy="true" xmlValidation="false"xmlNamespaceAware="false"> "/ser" docBase="D:\project\myProject\editor\WebRoot">其实就是给⼯程配置虚拟路径，这样tomcat在启动的时候直接找到你的⼯程了,你上传的图⽚就不会跑到/tomcat/webapps/⽬录，⽽是直接到了你的⼯程⾥,不管你怎样重启项⽬，或者清理缓存，上传的⽂件依然存在!。

kindeditor编辑上传图片删除并且删除服务器里面的图片一般来说有两种思路1，捕捉用户删除图片的动作，使用ajax发送url给服务器来删除，但是研究半天硬是找不到该事件，谁有思路要告诉我呀。

2，本人煞费苦心想出来的(嘿嘿)，不过也是一般人能想出来的。

获取用户在编辑的时候被删除图片的路径并保存到隐藏域里面，提交表单的时候顺便删除这些不用的图片，一下客户端的js脚本语言。

【客户端的js代码】KindEditor.ready(function(K){//声明3个数组//页面一打开的图片var oldimgsrc=[];//所有上传的图片var uploadimgsrc=[];//最后保存下来的图片var saveimgsrc=[];//创建一个编辑器对象var editor = K.create('textarea[name="content"]', {allowFileManager : false,items:['bold','italic','justifyleft','justifycenter','justifyright','image','fontsize','forecolor','hilitecolor','font name','fullscreen'],//上传图片后触发的事件afterUpload:function(url){uploadimgsrc.push(url.split('uploadfiles')[1]);},//保存新上传的图片路径afterCreate:function(){oldimgsrc=pickimg(editor.html());},//当编辑器失去焦点afterBlur:function(){//console.log(editor.items);saveimgsrc=pickimg(editor.html());//合并数组var allimgsrc=oldimgsrc.concat(uploadimgsrc).concat(saveimgsrc);//删除相同的元素var uniq=new arr_uniq(allimgsrc);uniq.uniq();var resultimg=[];//如果没有上传新图片if( uploadimgsrc.length==0 ) {//比较不同的元素resultimg=slectArray(allimgsrc,saveimgsrc);}else{resultimg=slectArray(allimgsrc,saveimgsrc);}//比较出页面一打开的图片和编辑完之后图片中不同路径的图片$('#delimg').html("");for(var r in resultimg){if($('#delimg').size()==1){//隐藏域为delimg[]，保存多个删除的图片路径$('#delimg').append('<input type="hidden" name="delimg[]" value="'+resultimg[r]+'"/>');}else{$('textarea[name="content"]').after('<span id="delimg"><input type="hidden" name="delimg[]" value="'+resultimg[r]+'"/></span>');}}}});});//以上面需要使用到下面三个函数//返回编辑器里面非http的图片的内容function pickimg(content){///(.*?)\/uploadfiles\/(.*?)/var re=/src="(.*?)\/uploadfiles\/(.*?)"/ig;arr=content.match(re);var ar=[];var tmp='';for(var i in arr){tmp=arr[i].split('uploadfiles')[1];ar[i]=tmp.replace('"','');}return ar;}//返回数组不相同的元素function slectArray(a,b){var c=[];for(var i=0;i<a.length;i++){if(b.indexOf(a[i])<0 ){c.push(a[i]);}}for(var i=0;i<b.length;i++){if(a.indexOf(b[i])<0 ){c.push(b[i]);}}return c;}//删除不同元素function arr_uniq(arr){this.arr=arr;}arr_uniq.prototype.uniq=function(){this.ori = [].concat(this.arr);for (var i=0;i<this.arr.length;i++){for (var j=i+1;j<this.arr.length;j++ ){if (this.arr[i]==this.arr[j]){this.arr.splice(j,1);}}}return this.arr;}【服务端的php代码】//删除不需要的本地图片if( !empty($_POST['delimg']) ){//delimg隐藏域名字foreach( $_POST['delimg'] as $v ) {@unlink(图片的绝对路径);}}。

下面是上传图片和删除图片的基本过程：
首先
1、进入后台，在网址后面加admin，比如：/admin,然后敲回车键，
进入后台登陆页面
2、输入用户名和密码，用户名:****** 密码：***************** 。

然后登录系统，
登录后的界面是
3、然后点“产品管理”进入产品管理页面，如
击进进入后，如
想添加分类的话，点左上角“新分类”就可以添加了，想删除某一个分类，直接点那个分类后面的就可以删除了。

提示说明：你添加分类的时候千万别忘了
把发布那个钩打上，否则是不会显示的。

分类这里这个显示的，就是网站页面里的
“产品分类”那一块，比如：，这里是相对应的。

5、新建好分类后，然后在根据产品图的分类，一个个把产品图上传到相对应的分类里，
上传产品：左上角有一个这个图标，会出现一个界面：
6、 然后根据提示一个个往下填，首先根据产品图的分类去选择哪一类的：
，然后写上产品名称
，在写上产品简介
，然后往下写上产品的内容也就是产品的描述，有产品描述的就写，没有不写也可以
，然后在往下，去
浏览产品图片，选择产品图，最后保存就可以了
，
7、这样一个产品图就上传完成了。

8、删除某一张产品图也是直接点某一个产品图后面的就可以了。

技术积累 - 关于Kindeditor编辑器上传图片文件的几个问题汇总(asp)[摘要]：我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧，它是一款非常强大的编辑器，轻量级的。

结合纯jQuery+CSS写成的，部署环境起来非常的简单方面快捷。

在Kindeditor的官方网站上面供下载的Demo，不过里头默认的都是php方面的demo。

那么asp的大神些如何能够实用在自己的网站项目中去呢？我们需要做如下几点。

1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方：1）、/kindeditor/plugins/images/image.js内的第15行，修改为如下图中所示2）、修改kindeditor所嵌入的页面，写上上传文件asp的地址，最好写相对路径，不要使用.../这样的形式2...我想做网站开发的程序员们对Kindeditor编辑器并不陌生的吧，它是一款非常强大的编辑器，轻量级的。

结合纯jQuery+CSS写成的，部署环境起来非常的简单方面快捷。

在Kindeditor的官方网站上面供下载的Demo，不过里头默认的都是php 方面的demo。

那么asp的大神些如何能够实用在自己的网站项目中去呢？我们需要做如下几点。

1、设置负责文件上传asp文件的路径设置这个路径值我们可以设置两个地方：1）、/kindeditor/plugins/images/image.js内的第15行，修改为如下图中所示2）、修改kindeditor所嵌入的页面，写上上传文件asp的地址，最好写相对路径，不要使用.../这样的形式2、修改upload_json.asp文件'上传成功返回true，否则返回falseresult = file.saveToFile(savePath, 0, true)if result = false thenresponse.Write("")response.Endend if3、修改Upload_Class.asp文件修改Upload_Class.asp内的saveToFile函数内的518行和520行如下If Not Err ThenSaveToFile = trueElseSaveToFile = falsemException=Err.DescriptionEnd If。

文件上传漏洞防御——图片写马的剔除最近回顾了一下CasperKid大牛在2011年11月发布的Upload Attack Framework，非常有感触，写得非常好，想深入了解这个漏洞的都推荐看看。

AD： 2013大数据全球技术峰会低价抢票中最近回顾了一下CasperKid大牛在2011年11月发布的Upload Attack Framework，非常有感触，写得非常好，想深入了解这个漏洞的都推荐看看。

上传功能常见于图片的上传，例如博客头像设置，广告位图片上传等。

上传检测方法在paper中也写的比较明朗，这里总结一下：1. 客户端使用JS对上传图片做检测，例如文件大小，文件扩展名，文件类型2. 服务端检测，例如文件大小(免得拒绝服务)，文件路径(避免0x00截断，目录遍历)，文件扩展名(避免服务器以非图片的文件格式解析文件)，文件类型(避免修改Content-Type为image/jpeg等)，文件内容(避免图片写马)上传检测绕过的方法，也总结一下：1.客户端检测，相当于没有检测，可以使用HTTP代理例如burp绕过2.服务端检测，一般采用白名单+黑名单的方式，但也极有可能出纰漏。

例如大小写，不在名单内的特例，操作系统bt特性(windows系统会自动去掉文件名最后面的点和空格)，0x00截断，服务器文件解析漏洞，最后还有图片写马绕过类型检测本篇博客重点讲讲图片写马的检测。

我们知道PHP中文件类型的检测可以使用1.$_FILES['uploaded']['type'];2.getimagesize两种方式来判断是否是正常图片，其实只要在不破坏图片文件格式的情况下，就可以绕过检测例如使用以下命令，将正常图片与一句话php木马绑定在一起生成一个新的文件的方式copy /b tangwei.jpg+yijuhua.php tangweiyijuhua.jpg我们查看新生图片的内容，在图片底端可以看到一句话木马写入，如下图所示strings tangweiyijuhua.jpg接下来我们演示这张图片是否能正常上传。