1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > PHPCMS V9手机移动端(支持单图和多图)图片上传 (PHPCMS V9前台使用layui的上传

PHPCMS V9手机移动端(支持单图和多图)图片上传 (PHPCMS V9前台使用layui的上传

时间:2023-12-09 20:03:06

相关推荐

PHPCMS V9手机移动端(支持单图和多图)图片上传 (PHPCMS V9前台使用layui的上传

默认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){//预读本地文件示例,不支持ie8obj.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) {//预读本地文件示例,不支持ie8obj.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>

PHPCMS V9手机移动端(支持单图和多图)图片上传 (PHPCMS V9前台使用layui的上传组件代替默认的SWFupload上传图片)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。