1.首先创建好html界面,我们命名为replynews.html ,代码如下:
<extend name="Common:base" />
<block name="body">
<h2>回复图文</h2>
<form class="layui-form" action="{:U('replynews')}" style="padding-right: 10px;" method="post">
<div class="layui-form-item">
<label class="layui-form-label">回复关键词</label>
<div class="layui-input-block">
<input type="text" name="keyword" placeholder="请输入关键词" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">封面图</label>
<div class="layui-input-block">
<input type="hidden" id="media_id" name="media_id">
<input type="hidden" id="url" name="url">
<img src="" id="img_logo" width="100" height="100" />
<button type="button" class="layui-btn" id="btn_upload">
<i class="layui-icon"></i>选择本地图片
</button>
<button type="button" class="layui-btn" id="btn_select">
<i class="layui-icon"></i>选择素材库中图片
</button>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
<textarea name="content" placeholder="请输入图文内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">原文地址</label>
<div class="layui-input-block">
<input type="text" name="content_source_url" placeholder="请输入原文地址如:http://xxxx.com/……" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="SBT">提交</button>
<a href="{:U('keywords',['type'=>'news'])}" class="layui-btn layui-btn-primary">返回</a>
</div>
</div>
</form>
2.编写submit 图片上传的jquery代码,用来上传数据代码如下:<script>
layui.use('form', function(){
var form = layui.form
form.on('submit(SBT)', function(data){
var load = layer.load();
$.post("{:U('replynews')}",data.field,function (res) {
if(res.status=='0'){
layer.close(load);
layer.alert(res.msg);
}
if(res.status=='1'){
layer.close(load);
layer.msg(res.msg,{time:1000},function () {
window.location.href=res.url;
});
}
})
return false;
});
});
//图片上传
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#btn_upload', //绑定元素
accept: 'images', //允许上传的文件类型
url: "{:U('upload')}", //上传接口
done: function(res){
//上传完毕回调
if(res.code=='0'){
var url ="__ROOT__" + res.url;
console.log(url);
$("#img_logo").attr("src",url);
$("#url").val(res.url);
}else{
layer.msg(res.msg);
}
},
error: function(){
//请求异常回调
}
});
});
$("#btn_select").click(function(){
layui.use('layer', function(){
var layer = layui.layer;
layer.open({
type: 2,
title: '永久素材',
shadeClose: true,
shade: 0.5,
area: ['680px', '300px'],
content: '{:U('common/selectImage')}',
btn:['确定','取消'],
yes: function(index, layero){
var body = layer.getChildFrame('body', index);
// console.log(body.html());
var img = body.find('.select').siblings('img');
$("#img_logo").attr('src',img.attr('src'));
$("#media_id").val(img.attr('media-id'));
$("#url").val(img.attr('url'));
layer.close(index);
}
});
});
})
</script>
</block>
3.然后开始编写控制器中的内容以实现界面的显示,数据上传数据库等操作
(一)获取表单提交的数据,先判断提交方式是get还是post
//回复图文
public function replynews(){
if (IS_GET) {
$this->display();
}else{
//以I函数获取post请求中的数据
$keyword =I('post.keyword');
// dump($keyword);
// exit;
$title =I('post.title');
$description =I('post.content');
// dump($description);
// exit;
$picurl =I('post.url');
// dump($picurl);
// exit;
$url =I('post.url');
// dump($url);
// exit;
if(empty($keyword) || empty($url)){
$this->ajaxReturn(array('status'=>0,'msg'=>'必须输入关键字和选择图片'));
exit;
}
// if (empty($media_id)) {
// $accessToken =getAccess_token();
// include APP_PATH .'LaneWeChat/lanewechat.php';
// //上传永久图片
// $api="https://api.weixin.qq.com/cgi-bin/material/add_material?access_token=$accessToken&type=image";
// $file =realpath('.'.$url);
// $data['media']=Curl::addFile($file);
// $ret =Curl::callwebServer($api,$data,'post',1,0);
// //上传成功
// if (isset($ret['media_id'])) {
// $media_id=$ret['media_id'];
// $url=$ret['url'];
// }else{
// $ret['fail']='本地图片上传公众平台失败';
// $this->ajaxReturn(array('status'=>1,'msg'=>$ret));
// exit;
// }
// }
// $data['media_id']=$media_id;
// $data['url']=$picurl;
// $data['title']=$title;
// $data['description']=$content;
// $data['content_source_url']=$url;
// $reply_id = M('mp_reply_news')->add($data);
// $mp=$this->mp;
// $arr['mp_id']=$mp['id'];
// $arr['type']='news';
// $arr['keyword']=$keyword;
// $arr['reply_id']=$reply_id;
// $ret=M('mp_rule')->add($arr);
// if ($ret) {
// $this->ajaxReturn(array('status'=>1,'msg'=>'添加成功','url'=>U('Autoreply/index',['type'=>'image'])));
// }else{
// $this->ajaxReturn(array('status'=>1,'msg'=>'添加失败'));
// }
// }
//赋值
$data['media_id']=$media_id;
$data['title']=$title;
$data['description']=$description;
$data['picurl']=$picurl;
$data['url']=$url;
//写入数据库
$reply_id=M('mp_reply_news')->add($data);
//获取当前公众号
$mp=$this->mp;
//获取当前公众号id
$arr['mp_id']=$mp['id'];
$arr['type']='news';
$arr['keyword']=$keyword;
$arr['reply_id']=$reply_id;
$ret=M('mp_rule')->add($arr);
if ($ret) {
$this->ajaxReturn(array('status'=>1,'msg'=>'添加成功','url'=>U('Autoreply/index',['type'=>'image'])));
}else{
$this->ajaxReturn(array('status'=>1,'msg'=>'添加失败'));
}
}
}
(二)实现数据上传部分代码尤为重要,单独拿出来让大家看一下
//赋值
$data['media_id']=$media_id;
$data['title']=$title;
$data['description']=$description;
$data['picurl']=$picurl;
$data['url']=$url;
//写入数据库
$reply_id=M('mp_reply_news')->add($data);
//获取当前公众号
$mp=$this->mp;
//获取当前公众号id
$arr['mp_id']=$mp['id'];
$arr['type']='news';
$arr['keyword']=$keyword;
$arr['reply_id']=$reply_id;
$ret=M('mp_rule')->add($arr);
if ($ret) {
$this->ajaxReturn(array('status'=>1,'msg'=>'添加成功','url'=>U('Autoreply/index',['type'=>'image'])));
}else{
$this->ajaxReturn(array('status'=>1,'msg'=>'添加失败'));
}
}