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>

<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="gzzzp">上傳圖片</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            <div class="layui-upload-list" id="gzzimgs"></div>
        </blockquote>
      </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);
            }
        });

    //多圖片上傳 工作中照片
    var uploadInst = upload.render({
        elem: '#gzzzp'
        , url: "index.php?m=attachment&c=attachments&a=imgupload&module=member"
        , multiple: true
        , before: function (obj) {
            //預讀本地文件示例,不支持ie8
            obj.preview(function (index, file, result) {
                $('#gzzimgs').append('<img src="' + result + '" alt="' + file.name + '" width="50" style="margin-left:5px;" class="layui-upload-img">')
            });
        }
        , done: function (res) {
            //上傳完畢
             $('#gzzimgs').append('<input type="hidden" name="gzzzp[]" value="' + res.src + '" />');
        }
    });
});
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章