919693957
/
Tools


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Me博客后台管理系统</title>
  <link rel="stylesheet" href="__ROOT__/css/layui.css" media="all">
  <script src="__ROOT__/layui.js"></script>
  <script src="__ROOT__/lay/modules/jquery.js"></script>


<!-- 上传图片按钮样式 -->
<style>
.upflie {
width: 80px;
height: 28px;
text-align: center;
vertical-align: middle;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
color: #fff;
cursor: pointer;
background: #009688;
border: 1px solid #009688;
outline: none;
position: relative;
display: inline-block;
overflow: hidden;
text-decoration: none;
line-height: 28px;
}
.upflie input {
position: absolute;
font-size: 10px;
width: 200px;
border: none;
cursor: pointer;
right: 0;
top: 0;
opacity: 0;
}
a:hover {
display: inline-block;
color: #fff;
text-decoration: none;
cursor: pointer!important;
opacity: 0.8;
}
.upflie :hover {
display: inline-block;
overflow: hidden;
color: #fff!important;
cursor: pointer;
text-decoration: none;
}
</style>
<!-- end -->


</head>
<body>
    <form  class="layui-form" action="{:url('article/add')}"  style="padding: 30px"  method="post"  enctype="multipart/form-data" >

            <div class="layui-form-item">
                <label class="layui-form-label">文章标题</label>
                <div class="layui-input-inline" style="width:400px;">
                <input type="text" name="title" id="uname" placeholder="请输入标题"   autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章作者</label>
                <div class="layui-input-inline" style="width:400px;">
                <input type="text" name="author" id="upass"  placeholder="请输入作者"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-inline" style="width:400px;">
                    <a class="upflie">添加图片
                        <input type="file" name="pic" id="pic" autocomplete="off" onchange="imgChange()" lay-verify="pics" >
                    </a>

                    <a class="upflie">取消
                     <input type="button" value="取消" onclick="call()" />
                    </a>

                    <img id="imghead"  width="260" height="180" src="/static/admin/images/noimage.png" />
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">文章关键词</label>
                <div class="layui-input-inline" style="width:400px;">
                <input type="text" name="keywords" id="upass" placeholder="请输入关键词,多个关键词需用英文逗号分隔"  autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label" style="width:80px">内容</label>
              <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea" name="content" id="content" style="border:0;padding:0"></textarea>
              </div>
            </div>

            
            <div class="layui-form-item">
                <label class="layui-form-label">是否推荐</label>
                <div class="layui-input-block">
                  <input type="radio" name="state" value="1" title="推荐" >
                  <input type="radio" name="state" value="0" title="不推荐" > 
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="submit" class="layui-btn" lay-submit  lay-filter="sub">立即添加</button>
                  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    </form>


<!-- 百度编辑器配置文件引入 -->
<script type="text/javascript" src="/static/extr/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/static/extr/ueditor/ueditor.all.js"></script>

<!-- 实例化编辑器 在需要使用百度编辑的的文本域中加入 id='content'
(例如：<textarea type='text' id="content" name="content" placeholder="请输入邮件内容" class="layui-textarea">)和下面UE中的对应，可以改成自己定义的只要一致就行-->
<script type="text/javascript">
    UE.getEditor('content',{initialFrameWidth:1100,initialFrameHeight:500,
      toolbars: [  
        [  
        'bold', //加粗  
        'indent', //首行缩进  
        'snapscreen', //截图  
        'italic', //斜体  
        'underline', //下划线  
        'strikethrough', //删除线  
        'formatmatch', //格式刷  
        'horizontal', //分隔线  
        'time', //时间  
        'date', //日期  
        'fontfamily', //字体  
        'fontsize', //字号  
        'paragraph', //段落格式  
        'link', //超链接  
        'emotion', //表情  
        'spechars', //特殊字符  
        'searchreplace', //查询替换 
        'forecolor', //字体颜色  
        'backcolor', //背景色  
        'edittip ', //编辑提示  
        'touppercase', //字母大写  
        'tolowercase', //字母小写  
      ]]
    });
</script>


<script>

layui.use(['form', 'layedit', 'jquery','upload','element'], function(){
        var form = layui.form
            ,element = layui.element
            ,layer = layui.layer
            ,$ = layui.jquery
            ,upload = layui.upload
            ;


    //表单图片格式验证
          form.verify({
                pics: [//验证图片格式   ^$:判断为空
                   /(?:^$|jpg|gif|png|jpeg)$/, '图片上传格式错误'
                ],
          });  


});
</script>


<script>
  // 图片显示(添加图片的时候显示当前图片)
      function imgChange() {
      //在图片 <input type="file" name="pic" id="pic" autocomplete="off" onchange="imgChange()">/*添加一个事件进行操作*/
      //<img id="imghead"  width="260" height="180" /> <!--图片显示位置-->
          //获取点击的文本框
          var file =document.getElementById("pic");
          var imgUrl =window.URL.createObjectURL(file.files[0]);
          var img =document.getElementById('imghead');
          img.setAttribute('src',imgUrl); // 修改img标签src属性值
      };

      //实现取消图片上传功能
      function call() {
        //将img的src属性赋值为空串
        document.getElementById("imghead").src = "/static/admin/images/noimage.png";
        //选择文件框的value属性赋值为空串
        document.getElementById("pic").value = "";
      }
</script>

</body>
</html>