百度编辑器：上传图片二
Posted 狂奔的蜗牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度编辑器：上传图片二相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于百度编辑器：上传图片二的主要内容，如果未能解决你的问题，请参考以下文章