案例：广告的增删改查
步骤：
1引用 js
2 填写 input type=" file" 的id
3 填写 url
4后台保存地址
5前台成功后的处理
广告添加页
<div class="modal-header no-padding">
<div class="table-header">
<i class="icon-lock"></i>
<button type="button" class="close" data-dismiss="modal">×</button>
添加广告
</div>
</div>
<div class="modal-body overflow-visible">
<label class="control-label pull-left" style="padding-right:20px;">类别</label>
<select id="class_id" name="class_id" class="left">
<option value="">不限</option>
<volist name="advertise_class" id="vo">
<eq name="vo.id" value="$map.class_id">
<option value="{$vo.id}" selected >{$vo.name}</option>
<else />
<option value="{$vo.id}" >{$vo.name}</option>
</eq>
</volist>
</select>
</div>
<div class="modal-body overflow-visible">
<div class="control-group">
<label class="control-label" for="name">广告名称</label>
<div class="controls">
<input type="text" required="required" id="name" name="name" placeholder="广告名称"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="url">广告地址</label>
<div class="controls">
<input type="text" required="required" id="url" name="url"
placeholder="注意添加http://"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Pic" >广告图片</label>
<div class="controls">
<input type="file" name="Pic" id="Pic" style="display: none" onchange="uploadFile();" />
<label for="Pic">
<img id="image" class="image" width="15%" height="15%" style="width: auto; height:80px;" src="__PUBLIC__/HomeStyle/images/photo.png" >
</label>
<!--<input type="file" id="image" style="display: none" onchange="uploadFile(\'{:U(\'Admin/Advertisement/image\')}\', \'imageCom\',\'logo_success\');" />-->
<!--<label for="image">-->
<!--<img class="logo_success" width="13%" height="13%" src="__PUBLIC__/HomeStyle/images/photo.png" >-->
<!--</label>-->
<!--<input id="file0" type="file" size="10" accept="image/*" placeholder="点击上传" onchange="uploadFile(\'{:U(\'Admin/Advertisement/image\')}\', \'file0\',\'advertise_pic\');" />-->
<!-- <!–用for属性绑定file控件–> -->
<!-- <label for="file0"> -->
<!--<img id="pic" class="advertise_pic" width="13%" height="13%" src="__PUBLIC__/HomeStyle/images/photo.png" alt=" " /> -->
<!-- </label> -->
</div>
</div>
<div class="control-group">
<label class="control-label" for="sort">排序</label>
<div class="controls">
<input type="text" required="required" id="sort" name="sort"
placeholder="数字越大越靠前"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="note">备注</label>
<div class="controls" >
<textarea type="text" style="height: 50px" cols="20" rows="10" required="required" id="note" name="note" />
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-small">
<i class="icon-remove"></i>
取消
</button>
<button type="button" class="btn btn-small btn-primary" onclick="$.doAdd(\'{:U(\'Admin/Advertisement/doAdd\')}\', this);">
<i class="icon-ok"></i>确认
</button>
</div>
<input id="pic_hidden" value="">
<script src="__PUBLIC__/HomeStyle/js/ajaxfileupload.js"></script>
<script type="text/javascript">
//图片上传
function uploadFile() {
$.ajaxFileUpload({
url: "{:U(\'Admin/Advertisement/upload\')}", //请求控制器地址
secureuri: false,
fileElementId: \'Pic\', //input type=“file”标签的id
dataType: \'json\', //返回值类型
success: function (data) //服务器成功响应处理函数
{
if (data.code ==1) {
$(\'#pic_hidden\').val(data.msg);
data.msg = data.msg + \'?\' + parseInt(Math.random() * 1000); //添加随机数
$(\'.image\').attr(\'src\', data.msg);
} else {
alert(data.msg);
}
},
})
}
jQuery(function($){
$.extend({
doAdd : function(url, obj)
{
var obj = $(obj).parents(\'form\');
$.ajax({
url : url,
type : \'get\',
data : {
class_id:$(\'#class_id\').val(),
name:$(\'#name\').val(),
url:$(\'#url\').val(),
pic:$(\'#pic_hidden\').val(),
sort:$(\'#sort\').val(),
note:$(\'#note\').val()
},
success : function(res)
{
$.lagou.alert(res.msg, res.code, 2);
$.lagou.formHide();
location.reload();
}
});
}
});
});
</script>
后台：
<?php
/**广告管理
* Created by PhpStorm.
* User: Administrator
* Date: 2017/5/3
* Time: 17:33
*/
namespace Admin\Controller;
class AdvertisementController extends BaseController {
protected $AdvertisementObj = null;
protected $Advertise_class=null;
public function __construct()
{
parent::__construct();
$this->AdvertisementObj = M(\'Advertisement\');
$this->Advertise_class=M(\'Advertise_class\');
}
/**
*
*/
public function index()
{
//获取页面中所有name标签的内容
$map=I();
//移除$map中所有可以转为false的值，如：false，0，‘0’，arrary(),null,\'\',
// $a=array_filter($map);
$a=$map;
//名称
if(!empty($a[\'name\'])){
$where[\'am.name\']=array(\'LIKE\',\'%\'.$a[\'name\'].\'%\'); //联表查询有两个name时，搜索条件要带表名。
}
//审核状态
//empty 若变量已存在、非空字符串或者非零，则返回 false 值；反之返回 true。
//换句话说，""、0、"0"、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的，如果 var 为空，则返回 TRUE。
//if 0代表假 非0代表真
if($a[\'state\']!=""){
$where[\'state\']=array(\'EQ\',$a[\'state\']);
}
//类别
if(!empty($a[\'class_id\'])){
$where[\'class_id\']=array(\'EQ\',$a[\'class_id\']);
}
//var_dump($where);
//分页
$total=$this->AdvertisementObj->where($where)->count();//获取总页数
$Page= new \Think\Pages($total,10);//显示10个页码
$Page->setConfig(\'first\',\'首页\');
$Page->setConfig(\'prev\',\'上一页\');
$Page->setConfig(\'next\',\'下一页\');
$Page->setConfig(\'last\',\'尾页\');
$showPage = $Page->show();
//搜索结果
// $data=$this-> companyModel->where($where)->page(I(\'get.p\',1),20)->order(\'create_time desc\')->join(\'as com left join lg_city_category as city on com.city=city.id left join lg_trade as tr on com.trade=tr.id left join lg_basic_config_category as bc on com.stage=bc.id\')->field(\'com.id as id,com.name as name,com.trade,city.name as city,tr.name as trade,bc.name as stage,com.state as state\')-> select();
$data=$this->AdvertisementObj->where($where)->page(I(\'get.p\',1),10)->order(\'sort desc\')->join(\'as am left join lg_advertise_class as ac on am.class_id=ac.id\')->field(\'am.id,am.name,am.create_time,am.sort,am.state,ac.name as class_name\') ->select();//get.p 表示页码,如果不存在则赋值1，每页20行。
//var_dump($data);
$advertise_category=$this->Advertise_class->order(\'sort desc\')->select();
//上一次搜索条件
$this->assign(\'map\',$a);
$this->assign(\'advertise_class\',$advertise_category);
//分页
$this->assign(\'page\',$showPage);
//列表
$this->assign(\'data\', $data);
$this->display();
}
/**
* 添加
*/
public function add()
{
$advertise_category=$this->Advertise_class->order(\'sort desc\')->select();
$this->assign(\'advertise_class\',$advertise_category);
$this->display();
}
/**
* 执行添加
*/
public function doAdd()
{
$data=I();
$data[\'create_time\'] = time();
$data[\'state\'] = 1;
$rs = $this->AdvertisementObj->add($data);
if($rs){
$msg[\'code\'] = 1;
$msg[\'msg\'] = \'添加成功\';
}else{
$msg[\'code\'] = 0;
$msg[\'msg\'] = \'添加失败\';
}
$this->ajaxReturn($msg);
}
//图片处理
public function upload()
{
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array(\'jpg\', \'gif\', \'png\', \'jpeg\');// 设置附件上传类型
$upload->savePath = \'./Advertisement/Pic/\'; // 设置图片上传目录，默认在 Uploads文件下。
$upload->saveName = time().\'_\'.mt_rand(); //生成随机名称，如果想实现替换可以定位用户id： (string)session(\'user.id\');
$upload->saveExt = \'jpeg\';
$upload->subName = "";
$upload->replace = true;
$upload->hash = false;
$info = $upload->upload();
if(!$info){
$msg[\'code\']=0;
$msg[\'msg\']=$upload->getError();
}else{
$msg[\'code\']=1;
$msg[\'msg\']= \'/Uploads/Advertisement/Pic/\'.$info[\'Pic\'][\'savename\']; //想前台返回地址和新名称
}
$this->ajaxReturn($msg);
}
/**
* 修改
*/
public function edit()
{
$id = I(\'get.id\');
$info = $this->AdvertisementObj->where(\'id=\'.$id)->find();
$advertise_category=$this->Advertise_class->order(\'sort desc\')->select();
$this->assign(\'advertise_class\',$advertise_category);
$this->assign(\'info\', $info);
$this->display();
}
/**
* 修改
*/
public function doEdit()
{
$data = I();
$rs = $this->AdvertisementObj->save($data);
if($rs===false){
$msg[\'code\'] = 0;
$msg[\'msg\'] = \'修改失败\';
}else{
$msg[\'code\'] = 1;
$msg[\'msg\'] = \'修改成功\';
}
$this->ajaxReturn($msg);
}
/*
* 删除
*/
public function delete()
{
$id = I(\'get.id\');
$rs=$this->AdvertisementObj->where(\'id=\'.$id)->delete();
if ($rs==0||$rs===false) {
$msg[\'code\'] = 0;
$msg[\'msg\'] = \'删除失败\';
} else {
$msg[\'code\'] = 1;
$msg[\'msg\'] = \'删除成功\';
}
$this->ajaxReturn($msg);
}
//审核通过
public function adopt(){
// $this->ajaxReturn($_GET["id"]);
// return;
$id = I(\'get.id\');
$data[\'state\']=1;
$res = $this->AdvertisementObj->where(\'id=\'.$id)->save($data);
if($res===false){
$msg[\'code\'] = 0;
$msg[\'msg\'] = \'操作失败\';
}else{
$msg[\'code\'] = 1;
$msg[\'msg\'] = \'操作成功\';
}
$this->ajaxReturn($msg);
}
//审核拒绝
public function refuse(){
$id = I(\'get.id\');
$data[\'state\']=2;
$res = $this->AdvertisementObj->where(\'id=\'.$id)->save($data);
if($res===false){
$msg[\'code\'] = 0;
$msg[\'msg\'] = \'操作失败\';
}else{
$msg[\'code\'] = 1;
$msg[\'msg\'] = \'操作成功\';
}
$this->ajaxReturn($msg);
}
}
修改页
<div class="modal-header no-padding">
<div class="table-header">
<i class="icon-lock"></i>
<button type="button" class="close" data-dismiss="modal">×</button>
添加广告
</div>
</div>
<div class="modal-body overflow-visible">
<label class="control-label pull-left" style="padding:0px 10px;">类别</label>
<select id="class_id" name="class_id" class="left">
<option value="">不限</option>
<volist name="advertise_class" id="vo">
<eq name="vo.id" value="$info.class_id">
<option value="{$vo.id}" selected >{$vo.name}</option>
<else />
<option value="{$vo.id}" >{$vo.name}</option>
</eq>
</volist>
</select>
</div>
<div class="modal-body overflow-visible">
<div class="control-group">
<label class="control-label" for="name">广告名称</label>
<div class="controls">
<input type="text" value="{$info.name}" required="required" id="name" name="name" placeholder="广告名称"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="url">广告地址</label>
<div class="controls">
<input type="text" required="required" id="url" name="url" value="{$info.url}"
placeholder="注意添加http://"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="Pic" >广告图片</label>
<div class="controls">
<input type="file" name="Pic" id="Pic" style="display: none" onchange="uploadFile();" />
<label for="Pic">
<if condition="$info.pic eq \'\'">
<img class="image" width="15%" height="15%" style="width: auto; height:80px;" src="__PUBLIC__/HomeStyle/images/photo.png" >
<else/>
<img id="image" class="image" width="15%" height="15%" style="width: auto; height:80px;" src="{$info.pic}" >
</if>
</label>
</div>
</div>
<div class="control-group">
<label class="control-label" for="sort">排序</label>
<div class="controls">
<input type="text" required="required" id="sort" name="sort" value="{$info.sort}"
placeholder="数字越大越靠前"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="note">备注</label>
<div class="controls" >
<textarea type="text" style="height: 50px" cols="20" rows="10" required="required" id="note" name="note" >{$info.note}</textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-small">
<i class="icon-remove"></i>
取消
</button>
<button type="button" class="btn btn-small btn-primary" onclick="doEdit();">
<i class="icon-ok"></i>确认
</button>
</div>
<input id="pic_hidden" value="">
<script src="__PUBLIC__/HomeStyle/js/ajaxfileupload.js"></script>
<script type="text/javascript">
//图片上传
function uploadFile() {
$.ajaxFileUpload({
url: "{:U(\'Admin/Advertisement/upload\')}",
secureuri: false,
fileElementId: \'Pic\',
dataType: \'json\',
success: function (data) //服务器成功响应处理函数
{
if (data.code ==1) {
$(\'#pic_hidden\').val(data.msg);
data.msg = data.msg + \'?\' + parseInt(Math.random() * 1000);
$(\'.image\').attr(\'src\', data.msg);
} else {
alert(data.msg);
}
},
})
}
function doEdit()
{
var adv_class_id = $("#class_id").find("option:selected").attr("value");
$.ajax({
url : "{:U(\'Admin/Advertisement/doEdit\')}",
type : \'post\',
data : {
id:{$info.id},
class_id:adv_class_id,
name:$(\'#name\').val(),
url:$(\'#url\').val(),
pic:$(\'#pic_hidden\').val(),
sort:$(\'#sort\').val(),
note:$(\'#note\').val()
},
success : function(res)
{
//alert(res);
$.lagou.alert(res.msg, res.code, 2);
$.lagou.formHide();
location.reload();
}
});
}
</script>
列表页
<extend name="Public/base" />
{// 导航}
<block name="breadcrumb">
<li class="active">广告管理</li>
</block>
{// 左侧菜单}
<block name="sidebar">
<include file="Public/sidebar" nav="advertise"/>
</block>
{// 主体}
<block name="main">
<div class="row-fluid">
<h3 class="header blue lighter smaller">
<form action="{:U(\'Admin/Advertisement/index\')}" method="get">
<div class="dataTables_wrapper">
<div class="grid_conent" id="m_search_div">
<div class="grid" style="width:28%">
<label class="control-label pull-left">广告名称：</label>
<input name="name" value="{$map.name}" type="text" id="search_name" class="pull-left" />
</div>
<div class="grid" style="width: 28%;" >
<label class="control-label pull-left">审核状态：</label>
<select name="state" class="pull-left">
<option value="">不限</option>
<option value="0" <?php if($map[\'state\']==\'0\'):?> selected="selected"<?php endif;?> >待审核</option>
<option value="1" <?php if($map[\'state\']==\'1\'):?>selected="selected" <?php endif;?> >已通过</option>
<option value="2" <?php if($map[\'state\']==\'2\'):?>selected="selected"<?php endif;?> >已拒绝</option>
</select>
</div>
<div class="grid" style="width:auto;">
<label class="control-label pull-left" style="padding-left:26px;">类别：</label>
<select name="class_id" class="left">
<option value="">不限</option>
<volist name="advertise_class" id="vo">
<eq name="vo.id" value="$map.class_id">
<option value="{$vo.id}" selected >{$vo.name}</option>
<else />
<option value="{$vo.id}" >{$vo.name}</option>
</eq>
</volist>
</select>
</div>
<div class="add_link" style=" width: auto; float: right;">
<button class="btn btn-primary btn-small" onclick="$.lagou.formShow(\'{:U(\'Admin/Advertisement/add\')}\');" type="button"><i class="icon-plus"></i>添加广告</button>
</div>
<div style="width:auto; float: right; padding-top:1px; "><button type="submit" class="btn btn-primary btn-small pull-left" id="search_submit"><i ></i>搜索</button></div>
</div>
</div>
</form>
</h3>
<div class="table-header">广告列表</div>
<div class="dataTables_wrapper" role="grid">
<table id="data_table" class="table table-striped table-bordered table-hover" style="margin-bottom:0px;">
<thead>
<tr>
<th>广告名称</th>
<th>创建时间</th>
<th>排序</th>
<th>类别</th>
<th>审核状态</th>
<th>审核</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php foreach ($data as $key => $value): ?>
<tr>
<td>{$value.name}</td>
<td>{$value.create_time|date="Y-m-d H:i", ###}</td>
<td>{$value.sort}</td>
<td>{$value.class_name}</td>
<td><eq name="value.state" value="0"><i class="waitting">等待审核</i><else/><eq name="value.state" value="1">已通过<else/> <eq name="value.state" value="2"><i class="red">已拒绝</i><else/> </eq> </eq></eq></td>
<td>
<div class="hidden-phone visible-desktop action-buttons">
<a href="javascript:;" onclick="$.adopt(\'{:U(\'Admin/Advertisement/adopt\', array(\'id\'=>$value[\'id\']))}\');" class="green" >
<i>通过</i>
</a>
<a href="javascript:;" onclick="$.refuse(\'{:U(\'Admin/Advertisement/refuse\', array(\'id\'=>$value[\'id\']))}\');" class="red" >
<i>拒绝</i>
</a>
</div>
</td>
<td>
<div class="hidden-phone visible-desktop action-buttons">
<a href="javascript:;" onclick="$.lagou.formShow(\'{:U(\'Admin/Advertisement/edit\', array(\'id\'=>$value[\'id\']))}\');" class="blue tooltip-info no-hover-underline" data-rel="tooltip" data-original-title="编辑资料">
<i class="icon-pencil bigger-130"></i>
</a>
<a href="javascript:;" onclick="$.del(\'{:U(\'Admin/Advertisement/delete\', array(\'id\'=>$value[\'id\']))}\');" class="red tooltip-error no-hover-underline" data-rel="tooltip" data-original-title="删除"><i class="icon-trash bigger-130"></i></a>
</div>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<!-- 分页 -->
<div class="row-fluid">
<div class="page">{$page}</div>
</div>
</div>
</div>
</block>
{// js}
<block name="js">
<script type="text/javascript">
jQuery(function($) {
// 这就是全选按钮
$(\'table th input:checkbox\').on(\'click\' , function(){
var that = this;
$(this).closest(\'table\').find(\'tr > td:first-child input:checkbox\')
.each(function(){
this.checked = that.checked;
$(this).closest(\'tr\').toggleClass(\'selected\');
});
});
$.extend({
action : function(url, obj)
{
var obj = $(obj).parents(\'form\');
$.ajax({
url : url,
type : \'get\',
data : obj.serialize(),
success : function(res)
{
$.lagou.alert(res.msg, res.code, 2);
$.lagou.formHide();
location.reload();
}
});
},
del : function(url)
{
$.lagou.confirm(\'确认删除吗？\', function(res){
if (res) {
$.get(url, function(response){
//alert(response);
$.lagou.alert(response.msg, response.code, 2);
location.reload();
});
}
});
},
//通过
adopt : function(url)
{
$.lagou.confirm(\'确定要通过吗？\', function(res){
if (res) {
$.get(url, function(response){
$.lagou.alert(response.msg, response.code, 2);
location.reload();
});
}
});
},
//拒绝
refuse : function(url)
{
$.lagou.confirm(\'确定拒绝吗？\', function(res){
if (res) {
$.get(url, function(response){
$.lagou.alert(response.msg, response.code, 2);
location.reload();
});
}
});
}
});
})
</script>
</block>