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