码迷,mamicode.com
首页 > Web开发 > 详细

批量上传图片

时间:2015-01-06 19:48:17      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:

实现的效果图

技术分享

引用

<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>

 

批量上传图片

标签:

原文地址:http://www.cnblogs.com/haozhenjie819/p/4206547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!