PbootCMS通过layui上传实现留言文件上传功能

2022-07-29 0 910

话不多说,直接上图上代码–这里以上传图片为例!其他文件自行修改
首先引入layui框架

1 <link rel="stylesheet" href="{pboot:sitetplpath}/layui/css/layui.css?v=v2.5.4">
2 <script type="text/javascript" src="{pboot:sitetplpath}/layui/layui.all.js?v=v2.5.4"></script>

然后修改前端的留言页面

01 <div class="form-group">
02     <label for="mobile">头 像</label>
03     <div>
04     <input type="text" name="ico" id="ico" placeholder="请上传缩略图"  class="layui-input">
05     <button type="button" class="layui-btn upload" data-des="ico">
06         <i class="layui-icon"></i>上传图片
07     </button>
08     <div id="ico_box"></div>
09     </div>
10 </div>
11  
12 <script>
13 layui.use(['element','upload'], function(){
14   var element = layui.element;
15   var upload = layui.upload;
16   
17   //执行单图片实例
18   var uploadInst = upload.render({
19     elem: '.upload' //绑定元素
20     ,url: '/index.php?p=/index/upload' //上传接口
21     ,field: 'upload' //字段名称
22     ,multiple: false //多文件上传
23     ,accept: 'images' //接收文件类型 images(图片)、file(所有文件)、video(视频)、audio(音频)
24     ,acceptMime: 'image/*'
25     ,donefunction(res){
26        var item = this.item;
27        layer.closeAll('loading'); //关闭loading
28        if(res.code==1){
29            $('#ico').val(res.data[0]);
30            $('#ico_box').html("<img src='"+res.data[0]+"' width=80 >");
31            layer.msg('上传成功!');
32        }else{
33            layer.msg('上传失败:'+res.data);
34        }
35     }
36     ,error: function(){
37         layer.closeAll('loading'); //关闭loading
38         layer.msg('上传发生错误!');
39     }
40   });
41 });
42 </script>

打开apps/home/controller/IndexController.php(30行下面)新增上传入口函数

1 public function upload()
2     {
3         $upload = upload('upload');
4         if (is_array($upload)) {
5             json(1, $upload);
6         else {
7             json(0, $upload);
8         }
9 }

PbootCMS通过layui上传实现留言文件上传功能

后台对应的改成图片展示或者其他形式
apps\admin\view\default\content\message.html
34行<td>[value->$field]</td>
改成

1 {if($value2->name=='ico')}<!--其中ico是你表单的字段名称,根据实际情况修改-->
2     <td><img src="[value->$field]"></td>
3 {else}
4     <td>[value->$field]</td>
5 {/if}

PbootCMS通过layui上传实现留言文件上传功能

注意:前端上传功能会影响网站的安全性,容易导致网站被入侵,如非必须情况不建议使用此功能。

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 PbootCMS PbootCMS通过layui上传实现留言文件上传功能 https://www.lingchenw.cn/6216.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载