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

本文由广东鲸弘科技有限公司提供惠州小程序开发 / 网站建设专业分享。

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

{pboot:sitetplpath}/layui/css/layui.css?v=v2.5.4
{pboot:sitetplpath}/layui/layui.all.js?v=v2.5.4

    然后修改前端的留言页面

<div class="form-group">
    <label for="mobile">头 像</label>
    <div>
    <input type="text" name="ico" id="ico" placeholder="请上传缩略图" class="layui-input">
    <button type="button" class="layui-btn upload" data-des="ico">
        <i class="layui-icon"></i>上传图片
    </button>
    <div id="ico_box"></div>
    </div>
</div>
 
<script>
layui.use([&#39;element&#39;,&#39;upload&#39;], function(){
  var element = layui.element;
  var upload = layui.upload;
  
  //执行单图片实例
  var uploadInst = upload.render({
    elem: &#39;.upload&#39; //绑定元素
    ,url: &#39;/index.php?p=/index/upload&#39; //上传接口
    ,field: &#39;upload&#39; //字段名称
    ,multiple: false //多文件上传
    ,accept: &#39;images&#39; //接收文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
    ,acceptMime: &#39;image/*&#39;
    ,done: function(res){
       var item = this.item;
       layer.closeAll(&#39;loading&#39;); //关闭loading
       if(res.code==1){
           $(&#39;#ico&#39;).val(res.data[0]); 
           $(&#39;#ico_box&#39;).html("<img src=&#39;"+res.data[0]+"&#39; width=80 >"); 
           layer.msg(&#39;上传成功！&#39;); 
       }else{
           layer.msg(&#39;上传失败：&#39;+res.data); 
       }
    }
    ,error: function(){
        layer.closeAll(&#39;loading&#39;); //关闭loading
        layer.msg(&#39;上传发生错误!&#39;); 
    }
  });
});
</script>

打开apps/home/controller/IndexController.php
  新增上传入口函数

public function upload()
    {
        $upload = upload('upload');
        if (is_array($upload)) {
            json(1, $upload);
        } else {
            json(0, $upload);
        }
}

后台对应的改成图片展示或者其他形式

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