1. 程式人生 > >PHPCMS V9手機移動端圖片上傳(PHPCMS V9前臺使用layui的上傳元件代替預設的SWFupload上傳圖片)

PHPCMS V9手機移動端圖片上傳(PHPCMS V9前臺使用layui的上傳元件代替預設的SWFupload上傳圖片)

預設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>