[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
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 治療托延癥前三大秘訣就是行動！行動！行動！ 我在四月報名了八月的半三鐵比賽， 自信滿滿的報了名， 卻被恐懼抑制住了...
    妹醬讓今天比昨天更好閱讀 254評論 1贊 1
  • 滑雪 冬天必須干的事情 何況在北方 屬于雪的地方 去了好多人 計科三個班 每班都有代表 還有其他系 涵的boyfr...
    萍萍_sunshine閱讀 138評論 0贊 0
  • 今天杭州的天氣又悶又熱，進入西湖創意谷的時候，剛好遇到MANDY，今天的她穿了一條簡潔的休閑藍色連身裙，配一雙舒適...
    鐺妹閱讀 393評論 0贊 0
  • 感悟 感知 感動 遺落在 街角邊的風箏 曾...
    初心的故事閱讀 169評論 0贊 2