美文网首页
[PHP高可用后端]①①--上传图片准备工作

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

作者: 子木同 | 来源:发表于2017-11-02 16:41 被阅读100次
    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

    相关文章

      网友评论

          本文标题：[PHP高可用后端]①①--上传图片准备工作

          本文链接：https://www.haomeiwen.com/subject/rlegpxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|[PHP高可用后端]①①--上传图片准备工作|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！