批量上传图片
实现的效果图
引用
<script src="/common/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="/kindeditor-4.1.7/kindeditor-all.js"></script>
<style type="text/css"> #imageView{background:#F5F9FF;padding:5px;} #imageView ul li{margin:2px;float:left;width:100px;height:100px;position:relative;border: 1px solid #d5e4fa;} #imageView ul li img{width:100px;height:100px;border:0;} #imageView ul li span{position:absolute;right:5px;top:5px;height:14px;width:14px;background:url(../images/false.gif) no-repeat;display:none;} </style>
htm页面
<table class="tableConfig" cellpadding="0" cellspacing="1"> <tr> <td class="leftcss" width="100">产品图片:</td> <td colspan="3"> <div id="imageView" class="clearfix" runat="server"><ul></ul></div> <input type="button" id="upimage" value="批量上传" class="button1" /> <label><input type="checkbox" id="isClear" checked="checked" />保留已上传的</label> </td> </tr> <tr> <td class="leftcss">详细信息:</td> <td colspan="3">
<textarea name="txtContent" id="txtContent" style="width: 100%; height: 300px;" runat="server"></textarea> </td> </tr> </table>
js部分
<script type="text/javascript"> function BindImageList() { $("#imageView ul li").mouseenter(function () { $(this).find("span").show(); }).mouseleave(function () { $(this).find("span").hide(); }); $("#imageView ul li span").click(function () { if (confirm("确定要删除此图片")) { $(this).parent().remove(); } }); } var editor; $(function () { BindImageList(); //加载编辑器样式 editor = KindEditor.create('textarea[name="txtContent"]', { allowFileManager: false, afterCreate: function () { var self = this; } }); //图片上传 $('#upimage').click(function () { editor.loadPlugin('multiimage', function () { editor.plugin.multiImageDialog({ clickFn: function (urlList) { var _html = []; KindEditor.each(urlList, function (i, data) { _html.push('<li><img src="' + data.url + '" /><span title="删除"></span><input type="hidden" value="' + data.url + '" name="pics" /></li>'); }); if ($("#isClear").attr("checked") != "checked") $('#imageView ul').empty(); $("#imageView ul").append(_html.join('')); BindImageList(); editor.hideDialog(); } }); }); }); }) </script>