| 主题: 利用批量上传按钮实现设为封面图片功能 |
| 作者: wfyu0502, 发布日期: 2013-08-09 17:01:03, 浏览数: 6844 |
|
这个是个比较实用的功能，以下功能基本能满足大家的需要了，因为不会JS，代码有些拼凑，JS高手们就不要以我这个了。 上传的图片可以生成缩略图排列，点击图片可以插入到编辑器中，可以删除某个图片，删除的同时会从服务上一起删除
第一个页面第一次上传页面：test.asp
代码中的imagepath为存放上传了图片的地址，入库时入这个就行的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .imgDiv { float:left; width:130px; height:110px; padding-top:10px; padding-left:5px; background:#ccc;} .imgDiv img{ border:0px; width:120px; height:90px} </style> <link rel="stylesheet" href="editor/themes/default/default.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="editor/kindeditor.js"></script> <script src="editor/lang/zh_CN.js"></script> <script> KindEditor.ready(function(K) { var imgh=""; var imgurl=""; var editor = K.editor({ allowFileManager : true, uploadJson : 'editor/asp/upload_json.asp' }); K('#J_selectImage').click(function() { editor.loadPlugin('multiimage', function() { editor.plugin.multiImageDialog({ clickFn : function(urlList) { var div = K('#J_imageView'); div.html(''); K.each(urlList, function(i, data) { var j=document.getElementById('ImagePath').value; if(j==""){ imgurl=data.url; } else{ imgurl=j+"|"+data.url; } $("#ImagePath").val(imgurl); }); editor.hideDialog(); var array = imgurl.split("|"); var ids; for (var s=0 ; s< array.length ; s++) { ids=array[s]; ids=ids.substr(ids.lastIndexOf("/")+1,ids.lastIndexOf(".")); ids=ids.replace(".",""); $('#J_imageView').append('<div class="imgDiv" id="'+ids+'"><a href="javascript:setContent(\'' + array[s] + '\')"><img title="点击图片将图片插入到编辑器" src="'+array[s] + '" width="120" height="90" border="0" /></a><br><label><input type="radio" name="IndexImageradio" onclick="setIndexImage(\''+array[s] +'\')" value="'+array[s] +'" />设为封面</label> <a href="javascript:dropThisDiv(\''+ids+'\',\''+array[s] +'\')">删除</a></div>'); } } }); }); }); }); //设置封面图片 function setIndexImage(Value) { $("#IcoImage").val(Value); //$("#picView").html("<img id='img_view' src='"+t+"' width='160'/>"); } //向编辑器插入图片 function setContent(Value) { if (Value != '' && Value != null) { var valueimg='<img src="'+Value+'" />'; editor.insertHtml(''+valueimg+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容 } } //向编辑器插入分页标签 function SetEditorPage(Value) { if (Value != '' && Value != null) { editor.insertHtml(''+Value+''); //利用kindeditor里的insertHtml方法向光标所在处添加html内容 } } //删除图片 function dropThisDiv(t,p) { document.getElementById(t).style.display='none' var str =document.getElementById("ImagePath").value; //取上传了的图片内容 var strs =document.getElementById("IcoImage").value; //取缩略图文本框的内容 //利用kindeditor里的内置API方法，取内容编辑器的内容,开始 var strcon = editor.html(); //editor为页面添加编辑器里JS里定义的那个值 editor.sync();//同步到editor这个编辑器 strcon = document.getElementById('Content').value; // 原生API，content为页面上textarea的ID值 //editor.html('HTML内容');设置编辑器的值 //取内容编辑器的内容,结束 var arr = str.split("|"); var nstr=""; for (var i=0; i<arr.length; i++) { if(arr[i]!=p) { if (nstr!="") { nstr=nstr+"|"; } nstr=nstr+arr[i] } } if (nstr=="") { $("#imgTable").hide(); } //判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管,开始 if (strs==p){ document.getElementById("IcoImage").value=""; //原来为"" } else { document.getElementById("IcoImage").value=strs; //原来为strs } //判断要删除的图片是否被设置成了封面，如果是就清空，如果不是就不管，结束 document.getElementById("ImagePath").value=nstr; if (confirm("你确定从服务上一起删除这个图片吗？")){ //弹出提示框，点确定后执行删除图片代码 //利用ajax调用deltu.asp页面进行删除图片 var myDate = new Date(); $.ajax({ url: "admin/deltu.asp?id="+p+"", data: { datetime: myDate.getTime() }, dataType: "text" }); //删除图片结束 //同时删除编辑器里插入的相应图片，开始 //正则替换开始 var regimgb='<img src="'+p+'" />'; var regconb=new RegExp(""+regimgb+"","g"); //创建正则RegExp对象 var stringObjconb=""+strcon+""; var newstrconb=stringObjconb.replace(regconb,""); //正则替换结束 editor.html(''+newstrconb+''); //利用kindeditor里的内置API方法替换掉原来的编辑器内的内容 //document.getElementById("IndexImage").value=stringObjcona; //调试用的 //同时删除编辑器里插入的相应图片，结束 } } </script> </head> <body> <FORM name="form" action="test2.asp" method="post" > <script> var editor; KindEditor.ready(function(K) { editor = K.create('textarea[name="Content"]', { filterMode : false, uploadJson : 'editor/asp/upload_json.asp', fileManagerJson : 'editor/asp/file_manager_json.asp', allowFileManager : true, width: '650px', hight: '300px' }); }); </script> <textarea name="Content" id="Content" style="width:650px;height:300px;visibility:hidden;"></textarea> 首页缩略图：<input type="text" id="IcoImage" name="IcoImage" value="" style="width:600px;" /><br/> <input type="button" id="J_selectImage" value="批量上传" /><br/> <input type="hidden" id="ImagePath" name="ImagePath" value="" style="width:600px;" /> <div id="J_imageView"></div> <br/><br/><INPUT class="button" type="submit" value="添加" /> </FORM> </body> </html>
第二个页，编辑修改页 test2.asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 要用到的图片删除页 deltu.asp <% dim fso,id id=request("id") FileName=server.MapPath(id) '必须转换成绝对路径的 Set Fso = CreateObject("scripting.filesystemobject") if Fso.FileExists(Filename) then '判断文件是否存在 Fso.DeleteFile filename end if Set Fso = nothing %> |
| 作者: 顺, 发布日期: 2013-10-19 01:46:47 |
|
支持分享！弱弱的问一下
kindsoft批量上传组件怎么获取返回的地址？官方批量上传图片的按钮，可是我不懂js那个返回的url要怎么可以获取出来？这样才能上传到数据库的一个字段下。 |
| 回复 |
| 作者: wfyu0502, 发布日期: 2013-10-21 13:18:36 |
|
回复顺：
首页缩略图：<input type="text" id="IcoImage" name="IcoImage" value="" style="width:600px;" /><br/>
上页标红的这个，imagepath就是存的上传了的图片地址的，入库时，入这个就行的呀 |
| 回复 |
| 作者: 裁决者, 发布日期: 2013-11-05 19:03:10 |
|
看下这个恢复到哪了
|
| 回复 |
| 作者: 理想天空, 发布日期: 2014-12-29 15:29:38 |
|
你好，在调用批量上传的时候，可以控制每次选择图片的数量和图片大小，但我想问的是：比如：从第一个页面提交到第二个页面的时候，怎么控制第一个页面总的上传的多少张图片？比如我要控制第一个页面总的上传10张，js该怎么写，谢谢！！
|
| 回复 |
| 作者: 87442393, 发布日期: 2015-01-29 14:49:41 |
| 回复 |
