私人领地

百度编辑器：上传图片二 

<!DOCTYPE html>
<html>
<head>

    <title>we234234</title>
    <script src="ueditor.config.js"></script>
    <script src="ueditor.all.min.js"></script>
    <script src="lang/zh-cn/zh-cn.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <style>
        /*上传*/
        .up-box{margin: 10px 0;border: 1px solid #eee;
            min-height:220px;
            /*display: none;*/}
        .up-box ul{padding: 0px;}
        .up-box li{width: 120px; height: 200px;
            float: left; margin: 10px;}
        .up-box li .img{width: 120px;
            height:120px; overflow: hidden;}
        .up-box .img img{width: 100%; vertical-align:bottom;}

        .up-box li .input{margin: 5px 0; width: 100%; border: 1px solid #eee; padding: 5px; }
        .up-box li .delete{cursor: pointer; color: #eee}
        .up-box li .delete:hover{color: #5cb85c }
        .clearfix{clear:both}
    </style>
</head>
<body>
<!--上传按钮-->
<button type="button" onClick="upImage()">上传</button>
<!--li 指针位置-->
<input type="" id="li-pointer" value="">
<hr>
<!-- 加载默认图片 json格式 -->
<div>加载默认的图片</div>
<div id="thumb_str">[{"src":"\/ueditor\/php\/upload\/image\/20170526\/1495787497215115.jpg","title":"123","top":1},{"src":"\/ueditor\/php\/upload\/image\/20170526\/1495789723119809.jpg","title":"undefined","top":0}]</div>
<!-- 图片显示框-->
<div class="up-box clearfix">
    <ul id="up-append">

    </ul>
</div>

<!-- 隐藏编辑器 -->
<div id="up_edit" style="display: none;" title="隐藏的编辑器"></div>

</body>
<script>
    var up = UE.getEditor('up_edit');
    $(document).ready(function(){
        /*初始化相册内容*/
        // 获取相册内容并且转数组格式
        $thumb_str = $('#thumb_str').text();
        var arg = eval('(' + $thumb_str + ')');
        DivShow(arg);

        // 初始化指针位置
        $l = $("#up-append li").length;
        $("#li-pointer").val($l);
    });


    //弹出图片上传的对话框
    function upImage()
    {
        var myImage = up.getDialog("insertimage");
        myImage.open();
    }
    //监听图片上传
    up.addListener('beforeInsertImage', function (t,arg)
    {
        DivShow(arg);
    });

    // 图片格式
    function DivShow(arr){
        var $str='';
        // 数组长度
        var $arr_length = arr.length;
        // 获取li指针位置
        $length = Number($("#li-pointer").val());


        for(i=0;i<$arr_length;i++){
            // 指针长度
            $ii = $length+i;
            //alert($ii);
            $str += "<li class='list_"+$ii+"'>";
            $str+= "<input name='up-thumb[]' id='up-thumb-"+i+"' type='hidden' value='"+arr[i].src+"'>";
            $str +="<div class='img'><img src='"+arr[i].src+"' /></div>";
            $str +="<input name='up-title[]' id='up-title-"+i+"' value='"+arr[i].title+"' class='input' placeholder='请设置标题'>"

            if(arr[i]['top'] ==1){
                $str +="<label class='pull-left'><input name='up-top' type='radio' value='"+$ii+"' checked>设置封面 </label>"
            }else{
                $str +="<label class='pull-left'><input name='up-top' type='radio' value='"+$ii+"'/>设置封面 </label>"
            }

            $str +="<label class='pull-right' class='delete'><a href='javascript:dele_list("+$ii+")'>删除</a> </label>";
            $str += "</li>";
        }

        $("#up-append").append($str)

        // 重新生成指针位置
        $t =  parseInt($length)  + $arr_length;
        $("#li-pointer").val($t);

    }
    // 删除
    function dele_list($id){
        $(".list_"+$id).remove();
    }

</script>

</html>

 

posted @ 2017-05-26 20:37  狂奔的蜗牛Snails  阅读(237)  评论(0)    收藏  举报