默認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>