kindeditor后台编辑器上传图片后在下拉框中设为封面图，图...

安哥网络 · 发表于 2013-12-21 15:45:02

kindeditor后台编辑器上传图片后在下拉框中设为封面图，图片列表删除等操作-it论坛
kindeditor后台编辑器上传图片后在下拉框中设为封面图，图片列表删除等操作
一直以来很多人在问。我也是js菜鸟。

.其实配合官方提供的：afterUpload方法就行。
花了10分钟。写了一个。不太习惯使用官方的node,用的是jQuery写操作的。。
说明。不用问我在后台怎么进行删除。it论坛
因为我只懂asp和asp.net(是新手菜鸟)，如果你问php。我不懂。这个你做php开发的。不懂删除文件。。这也。。。
好了。不多说。。上代码：it论坛

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>upload-news</title>
<style>
form {
margin: 0;
}
textarea {
display: block;
}
</style>
<script charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script charset="utf-8" src="../kindeditor-min.js"></script>
<script charset="utf-8" src="../lang/zh_CN.js"></script>
<script type="text/javascript">
$(function() {
var editor = KindEditor.create('textarea[name="content"]', {
uploadJson: '../asp/upload_json.asp',
fileManagerJson: '../asp/file_manager_json.asp',
afterUpload: function(url) {
// 插入到文本框中
if ($('#ImagesUrlList').val() != '') {
$('#ImagesUrlList').val($('#ImagesUrlList').val() + url + '|');
} else {
$('#ImagesUrlList').val(url + '|');
}
// 插入到下拉框中
$('#DownUrlList').append('<option value="' + url + '">' + url + '</option>');
// 插入图片列表，和下拉框一样。都的使用：append方法插入
var timestamp = genRandNumber(1000000, 999999999);
$('#ImgList').append('<li id="n' + timestamp + '"><img src="' + url + '" width="120" height="90" /><p><a href="javascript:void(0);" onClick="RemoveImages(\'n' + timestamp + '\',\'' + url + '\');return false;">删除</a></p></li>');
}
});
});
function doChangeImages(str) {
if (str != '') {
$('#ImagesUrl').val(str);
}
}
function RemoveImages(n, v) {
$('#' + n).remove();
if ($('#ImagesUrlList').val() != '') {
// 因为是以|分割保存在文本框中。所以要加上个|,
// 要是这里不想加，把|加在生成li图片列表的标签函数里面:
// onClick="RemoveImages(\'n' + timestamp + '\',\'' + url + '|\');return false;"
$('#ImagesUrlList').val($('#ImagesUrlList').val().replace(v + '|', ''));
// 同时删除下拉框中的
$('#DownUrlList option[value=\'' + v + '\']').remove();
// 删除之后。如果想从服务器上面删除，这里做个ajax的操作就行。传递的图片路径的变量为：v
// dataurl在后端接收图片的路径，进行删除
$.get('删除的url，根据你的语言', {
dataurl: v
},
function(data) {
//这里data返回处理的值，程序员自行处理，后台语言不一样，我就不处理了
})
}
}
// 随机函数
function genRandNumber(startNum, endNum) {
var randomNumber;
randomNumber = Math.round(Math.random() * (endNum - startNum)) + startNum;
return randomNumber;
}
</script>
</head>
<body>
<h3>不太习惯使用官方的node,使用jQuery</h3>
<form>
<textarea name="content" style="width:750px;height:200px;"></textarea>
返回文件名到文本框，可能返回的文件比较多。这里就用文本域了：
<textarea id="ImagesUrlList" style="width:750px;height:100px;"></textarea>
封面图片:<input type="text" id="ImagesUrl" style="width:400px;">
<select id="DownUrlList" onChange="doChangeImages(this.value);">
<option value="">选择封面图片</option>
</select>
图片列表:
<div>
<ul id="ImgList">
</ul>
</div>
</form>
</body>
</html>

复制代码

摘自:http://www.51xflash.com/website/javascript/201307/09-33132.html

		自动登录	找回密码
密码			立即注册

kindeditor后台编辑器上传图片后在下拉框中设为封面图，图...

相关帖子

浏览过的版块

优秀会员

助人为乐

辛勤工作

技术精英

多才多艺

优秀班竹

灌水天才

星球管理

宣传大使

灌水之王

财富勋章

版主勋章

动漫勋章

勤奋会员

论坛精英

PS高手

心

8

闪游皮肤

双鱼座

8★8➹

志愿者

乖