zoukankan      html  css  js  c++  java
  • 批量上传图片

    实现的效果图

    引用

    <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=" 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>
  • 相关阅读:
    获取设备和 App 信息
    使用 UICollectionView 实现网格化视图效果
    UIImage 读取图片内存优化
    使用 stretchableImageWithLeftCapWidth 方法实现可伸缩图片
    使用 StoryBoard 实现左右按钮切换图片的浏览效果
    二维码图片生成(扩展知识:创建带圆角效果的图片)
    Objective-C语法之扩展(Extension)的使用
    Objective-C语法之字符串NSString去掉前后空格或回车符(可以是NSCharacterSet类型的其它字符)
    Objective-C语法之可变参数
    什么时候layoutSubview会被调用
  • 原文地址:https://www.cnblogs.com/haozhenjie819/p/4206547.html
Copyright © 2011-2022 走看看