| 主题: 分享上传图片后在下拉框中设为封面图，图片列表删除等操作 |
| 作者: 小浪子, 发布日期: 2013-02-21 10:40:54, 浏览数: 3449 |
|
一直以来很多人在问。我也是js菜鸟。 花了10分钟。写了一个。不太习惯使用官方的node,用的是jQuery写操作的。。
说明。不用问我在后台怎么进行删除。 因为我只懂asp和asp.net(是新手菜鸟)，如果你问php。我不懂。这个你做php开发的。不懂删除文件。。这也。。。
好了。不多说。。上代码： <!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 = getRandNumber(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 getRandNumber(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>
<br />
返回文件名到文本框，可能返回的文件比较多。这里就用文本域了：
<textarea id="ImagesUrlList" style="width:750px;height:100px;"></textarea>
<br />
封面图片:<input type="text" id="ImagesUrl" style="width:400px;">
<br />
<select id="DownUrlList" onChange="doChangeImages(this.value);">
<option value="">选择封面图片</option>
</select>
<br />
图片列表:<br />
<div>
<ul id="ImgList">
</ul>
</div>
</form>
</body>
</html>
|
| 作者: lyj4532556, 发布日期: 2013-07-06 17:57:57 |
|
谢谢楼主分享啊，你这个很牛，能不能只把值返回到id="ImagesUrlList" 这对于做产品相册很受用的
|
| 回复 |
.其实配合官方提供的：afterUpload方法就行。