PbootCMS在線留言帶上傳功能layui上傳圖片程序開發
導讀:程序開發程序開發PbootCMS在線留言帶上傳功能 layui上傳功能,這里以上傳圖片為例!其他文件自行修改。 1、首先引入layui框架 linkrel=stylesheet網站建設教程seo網站優化。
PbootCMS在線留言帶上傳功能 layui上傳功能,這里以上傳圖片為例!其他文件自行修改。 1、首先引入layui框架 linkrel=stylesheethref={pboot:sitetplpath}/layui/css/layui.css?v=v2.5.4scripttype=text/javascriptsrc={pboot:sitetplpath}/layui/layui.all.js?v=v2.5.4/script 2、然后修改前端的留言頁面 divclass=form-grouplabe […]
PbootCMS在線留言帶上傳功能 layui上傳功能,這里以上傳圖片為例!其他文件自行修改。
1、首先引入layui框架
<link rel="stylesheet" href="{pboot:sitetplpath}/layui/css/layui.css?v=v2.5.4"> <script type="text/javascript" src="{pboot:sitetplpath}/layui/layui.all.js?v=v2.5.4"></script>2、然后修改前端的留言頁面
<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(['element','upload'], function(){ var element = layui.element; var upload = layui.upload; //執行單圖片實例 var uploadInst = upload.render({ elem: '.upload' //綁定元素 ,url: '/index.php?p=/index/upload' //上傳接口 ,field: 'upload' //字段名稱 ,multiple: false //多文件上傳 ,accept: 'images' //接收文件類型 images(圖片)、file(所有文件)、video(視頻)、audio(音頻) ,acceptMime: 'image/*' ,done: function(res){ var item = this.item; layer.closeAll('loading'); //關閉loading if(res.code==1){ &nbs建設網站公司p;企業網站建設 $('#ico').val(res.data[0]); $('#ico_box').html("<img src='"+res.data[0]+"' width=80 >"); layer.msg('上傳成功!'); }else{ layer.msg('上傳失敗:'+res.data); } } ,error: function(){ layer.closeAll('loading'); //關閉loading layer.msg('上傳發生錯誤!'); } }); }); </script>聲明: 本文由我的SEOUC技術文章主頁發布于:2023-05-25 ,文章PbootCMS在線留言帶上傳功能layui上傳圖片程序開發主要講述上傳圖片,在線留言,CMS網站建設源碼以及服務器配置搭建相關技術文章。轉載請保留鏈接: http://www.bifwcx.com/article/web_8281.html