PbootCMS

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

也想出现在这里?联系我们
创客云

PbootCMS 通过 layui 上传实现留言文件上传功能。话不多说,直接上图上代码–这里以上传图片为例!其他文件自行修改,首先引入 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>
也想出现在这里?联系我们
创客主机

然后修改前端的留言页面

  1. <div class="form-group">
  2.     <label for="mobile">头 像</label>
  3.     <div>
  4.     <input type="text" name="ico" id="ico" placeholder="请上传缩略图"  class="layui-input">
  5.     <button type="button" class="layui-btn upload" data-des="ico">
  6.         <i class="layui-icon"></i>上传图片
  7.     </button>
  8.     <div id="ico_box"></div>
  9.     </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.     ,done: function(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

新增上传入口函数

  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上传实现留言文件上传功能
后台对应的改成图片展示或者其他形式
PbootCMS通过layui上传实现留言文件上传功能
注意:前端上传功能会影响网站的安全性,容易导致网站被入侵,如非必须情况不建议使用此功能。

资源下载此资源下载价格为5立即购买,VIP 免费

收藏
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

发表评论

热销模板

Hub - 响应式可视化编辑企业官网WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

请扫码添加QQ好友后咨询!