PHPCMS V9手機移動端圖片上傳(PHPCMS V9前臺使用layui的上傳元件代替預設的SWFupload上傳圖片)
阿新 • • 發佈:2018-12-19
預設phpcms的上傳 圖片使用的是swfupload,導致手機移動端上傳圖片無法使用。這裡我們使用layui的上傳元件來使其支援手機移動端圖片上傳,效果圖如下:
實現步驟:
一、 開啟phpcms\modules\attachment\attachments.php檔案,新增如下函式:
public function imgupload() { pc_base::load_sys_class('attachment','',0); $module = trim($_GET['module']); $catid = intval($_GET['catid']); $siteid = $this->get_siteid(); $site_setting = get_site_setting($siteid); $site_allowext = $site_setting['upload_allowext']; $attachment = new attachment($module,$catid,$siteid); $a = $attachment->upload('file',$site_allowext); if($a){ $result['code'] = 0; $result['msg'] = '圖片上傳成功!'; $result['src'] = $this->upload_url.$attachment->uploadedfiles[0]['filepath']; //return $result; exit(json_encode($result)); }else{ // 上傳失敗獲取錯誤資訊 $result['code'] = 1; $result['msg'] = '圖片上傳失敗!'; //return $result; exit(json_encode($result)); } }
二、上傳表單的模板(模板中需要引入layui.css和layui.js)如下:
<div class="layui-form-item"> <label class="layui-form-label">營業執照</label> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal" id="yyzz">上傳圖片</button> <div id="yy_zz"><input type="hidden" name="info[licence]" lay-verify="yyzz" value="" /></div> <div class="layui-upload-list"> <img class="layui-upload-img" id="yyzzimg" style="width: 150px;"> </div> </div> </div>
<script> layui.use(['element', 'table', 'layer', 'upload', 'form'], function(){ var element = layui.element, form = layui.form, laydate = layui.laydate, upload = layui.upload, $ = layui.jquery, layer = layui.layer; var uploadInst = upload.render({ elem: '#yyzz' ,url: "index.php?m=attachment&c=attachments&a=imgupload&module=member" ,accept:'images' ,before: function(obj){ //預讀本地檔案示例,不支援ie8 obj.preview(function(index, file, result){ $('#yyzzimg').attr('src', result); //圖片連結(base64) }); } ,done: function(res){ $("input[name='info[licence]']").val(res.src); } }); }); </script>