[PHP高可用后端]①①--上传图片准备工作

Paste_Image.png
Paste_Image.png

娱乐新闻表结构

ent_news

Paste_Image.png
Paste_Image.png
Paste_Image.png

uploadify

http://www.uploadify.com/

demo

http://www.uploadify.com/demos/

Paste_Image.png
Paste_Image.png
Paste_Image.png

index/index.html去掉<body>标签

Paste_Image.png

_menu.html

<aside class="Hui-aside">
    <div class="menu_dropdown bk_2">
        <dl id="menu-news">
            <dt><i class="Hui-iconfont"></i> 娱乐新闻管理<i class="Hui-iconfont menu_dropdown-arrow"></i></dt>
            <dd>
                <ul>
                    <li><a data-href="{:url('news/add')}" data-title="添加管理" onClick="Hui_admin_tab(this)">添加管理</a>
                    </li>
                </ul>
            </dd>
        </dl>
        <dl id="menu-article">
            <dt><i class="Hui-iconfont"></i> 管理员管理<i class="Hui-iconfont menu_dropdown-arrow"></i></dt>
            <dd>
                <ul>
                    <li><a data-href="{:url('admin/add')}" data-title="添加管理员" onClick="Hui_admin_tab(this)">添加管理员</a>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
</div>

<li><a data-href="{:url('news/add')}" data-title="添加管理" 
onClick="Hui_admin_tab(this)">添加管理</a>

News.php

<?php
/**
 * Created by PhpStorm.
 * User: tong
 * Date: 2017/11/1
 * Time: 17:20
 */

namespace app\admin\controller;

class News extends Base
{
    public function add()
    {
        return $this->fetch();
    }
}

image.js


$(function () {
    $("#file_upload").uploadify({
        swf: swf,
        uploader: image_upload_url,
        buttonText: '图片上传',
        fileTypeDesc: 'Image files',
        fileObjName: 'file',
        fileTypeExts: '*.gif;*.jpg;*.png',
        onUploadSuccess: function (file, data, response) {
            //我们需要扩展内容
            if (response) {
                $('#upload_org_code_img').attr('src', JSON.parse(data).data);
                $('#file_upload_image').attr('value', JSON.parse(data).data);
                $('#upload_org_code_img').show();
            }
        }
    });
});

index.html(news)

<!--header-->
{include file="public/_meta" title="娱乐资讯"/}
<>
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 资讯管理 <span class="c-gray en">></span> 资讯列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
<div class="page-container">
  <div class="text-c">
    <form action="" method="get">
   <span class="select-box inline">
    <select name="catid" class="select">
          <option value="0">全部分类</option>

          <option value="" ></option>

        </select>
    </span> 日期范围：
      <input type="text" name="start_time" class="input-text" id="countTimestart" onfocus="selecttime(1)" value="" style="width:120px;" >
      -
      <input type="text" name="end_time" class="input-text" id="countTimestart" onfocus="selecttime(1)" value=""  style="width:120px;">

      <input type="text" name="title" id="" value="" placeholder=" 资讯名称" style="width:250px" class="input-text">
      <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 搜资讯</button>
    </form>
  </div>

  <div class="mt-20">
    <table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" >
      <thead>
      <tr class="text-c">
        <th width="25"><input type="checkbox" name="" value=""></th>
        <th width="80">ID</th>
        <th>标题</th>
        <th width="80">分类</th>
        <th width="80">缩图</th>
        <th width="120">更新时间</th>
        <th width="40">是否推荐</th>
        <th width="60">发布状态</th>
        <th width="120">操作</th>
      </tr>
      </thead>
      <tbody>

      <tr class="text-c">
        <td><input type="checkbox" value="" name=""></td>
        <td></td>
        <td class="text-l"><u style="cursor:pointer" class="text-primary"  title="查看"></u></td>
        <td></td>
        <td><img width="60" height="60" class="picture-thumb" src=""></td>
        <td></td>
        <td></td>
        <td class="td-status"></td>
        <td class="f-14 td-manage"> <a style="text-decoration:none" class="ml-5" onClick="article_edit('资讯编辑','article-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a> <a style="text-decoration:none" class="ml-5" onClick="" href="javascript:;" title="删除" del_url=""><i class="Hui-iconfont"></i></a></td>
      </tr>

      </tbody>
    </table>
    <div id="laypage"></div>
  </div>

</div>
<!--header-->
{include file="public/_footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/hadmin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">


</script>
<style>
  .imooc-app .pagination li{display:inline; padding-left:10px;}
  .pagination .active{color:red}
  .pagination .disabled{color:#888888}
</style>
</body>
</html>

add.html(news)

<!--header-->
{include file="public/_meta" /}
<article class="page-container">
  <form class="form form-horizontal" id="form-singwaapp" url="">
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文章标题：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="" placeholder="" id="title" name="title">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">简略标题：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input type="text" class="input-text" value="" placeholder="" id="samll_title" name="small_title">
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>分类栏目：</label>
      <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select name="catid" class="select">
                 
                  <option value=""></option>
                  
                </select>
                </span> </div>
    </div>

    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">文章摘要：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <textarea name="description" cols="" rows="" class="textarea"  placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" ></textarea>
        <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
      </div>
    </div>


    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">允许评论：</label>
      <div class="formControls col-xs-8 col-sm-9 skin-minimal">
        <div class="check-box">
          <input type="checkbox" id="is_allowcomments" name="is_allowcomments" value="">
          <label for="checkbox-pinglun">&nbsp;</label>
        </div>
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">是否推荐到首页头图：</label>
      <div class="formControls col-xs-8 col-sm-9 skin-minimal">
        <div class="check-box">
          <input type="checkbox" id="is_head_figure" name="is_head_figure" value="">
          <label for="checkbox-pinglun">&nbsp;</label>
        </div>
      </div>
    </div>
    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">是否推荐：</label>
      <div class="formControls col-xs-8 col-sm-9 skin-minimal">
        <div class="check-box">
          <input type="checkbox" id="is_position" name="is_position" value="">
          <label for="checkbox-pinglun">&nbsp;</label>
        </div>
      </div>
    </div>

    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <input id="file_upload"  type="file" multiple="true" >
        <img style="display: none" id="upload_org_code_img" src="" width="150" height="150">
        <input id="file_upload_image" name="image" type="hidden" multiple="true" value="">
      </div>
    </div>

    <div class="row cl">
      <label class="form-label col-xs-4 col-sm-2">文章内容：</label>
      <div class="formControls col-xs-8 col-sm-9">
        <script id="editor" type="text/plain" name="content" style="width:100%;height:400px;"></script>
      </div>
    </div>
    <div class="row cl">
      <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
        <button  class="btn btn-secondary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存</button>
        <button onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
      </div>
    </div>
  </form>
</article>

<!--header-->
{include file="public/_footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/hadmin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js"}
{load href="__STATIC__/admin/js/image.js"}
 <script type="text/javascript">
  $(function(){
    $('.skin-minimal input').iCheck({
      checkboxClass: 'icheckbox-blue',
      radioClass: 'iradio-blue',
      increaseArea: '20%'
    });

    //表单验证
    $("#form-singwaapp").validate({
      rules:{
        title:{
          required:true,
        },
        small_title:{
          required:true,
        },
        catid:{
          required:true,
        },
        sources_type:{
          required:true,
        },
        is_allowcomments:{
          required:true,
        },

      },
      onkeyup:false,
      focusCleanup:true,
      success:"valid",
      submitHandler:function(form){
        singwaapp_save(form);// 需要小伙伴自定义一个singwaapp_save方法 用来处理抛送请求的哦
      }
    });

    var ue = UE.getEditor('editor');

  });

</script>
<!--/请在上方写此页面业务相关的脚本-->

</body>
</html>

{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js"}
{load href="__STATIC__/admin/js/image.js"}

_meta.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/hadmin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/hadmin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/uploadify/uploadify.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/hadmin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->

    <script>
        swf = '__STATIC__/admin/uploadify/uploadify.swf';
        image_upload_url = "{:url('image/upload')}";
    </script>
<body>

<link rel="stylesheet" type="text/css" 
href="__STATIC__/admin/uploadify/uploadify.css"/>

<script>
    swf = '__STATIC__/admin/uploadify/uploadify.swf';
    image_upload_url = "{:url('image/upload')}";
</script>

Image.php

<?php

namespace app\admin\controller;

/**
 * 后台图片上传相关逻辑
 * Class Image
 * @package app\admin\controller
 */
class Image extends Base
{

    /**
     * 图片上传
     */
    public function upload()
    {
        //测试
        $data = [
            'status' => 1,
            'message' => 'OK',
            'data' => 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509619181680&di=e4eec2188fe25ee05523e3ecfae6d4f2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201512%2F15%2F20151215161101_scPaX.jpeg',
        ];
        echo json_encode($data);
    }
}
Paste_Image.png

记得关闭

image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,386评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,142评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,704评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,702评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,716评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,573评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,314评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,230评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,680评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,706评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,329评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2赞 355

推荐阅读更多精彩内容

  • 晨讀感悟 用立即行動治療拖延症
    治療托延症前三大秘訣就是行動！行動！行動！ 我在四月報名了八月的半三鐵比賽， 自信滿滿的報了名， 卻被恐懼抑制住了...
    妹酱让今天比昨天更好阅读 252评论 1赞 1
  • 相爱⑯
    滑雪 冬天必须干的事情 何况在北方 属于雪的地方 去了好多人 计科三个班 每班都有代表 还有其他系 涵的boyfr...
    萍萍_sunshine阅读 134评论 0赞 0
  • 采访文
    今天杭州的天气又闷又热，进入西湖创意谷的时候，刚好遇到MANDY，今天的她穿了一条简洁的休闲蓝色连身裙，配一双舒适...
    铛妹阅读 386评论 0赞 0
  • 无题
    感悟 感知 感动 遗落在 街角边的风筝 曾...
    初心的故事阅读 164评论 0赞 2