微擎多图上传模块进行多图预览

微擎多图上传解决方案

最新推荐文章于 2022-03-03 14:41:53 发布

原创最新推荐文章于 2022-03-03 14:41:53 发布 · 979 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微擎

微擎专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在微擎开发环境下使用tpl_app_form_field_image组件上传多张图片，并在编辑时显示这些图片的方法。通过将图片地址拼接成字符串存储，再利用jQuery解析并展示。

开发微擎模块的时候，客户端用 tpl_app_form_field_image 进行图片上传，上传后进行编辑时无法显示已上传的多张图片

tpl_app_form_field_image的第二个参数只能是字符串，为了能显示多图，这里用jQ的方法进行实现

项目中我是将多张图片的地址拼接成字符串放入一个字段中

直接上代码：

{php echo tpl_app_form_field_image('imgUrl');}//这是图片上传模板

var imgstr="{$item['thumb']}";//thumb 为储存多图地址的字段
    if(imgstr.length>0){
    	var imgarr=imgstr.split(',');
    	for (var i = 0; i < imgarr.length; i++) {
    		var img=imgarr[i];
    		var atturl="{$_W['attachurl']}"+img;
    		$('.js-image-imgUrl').parent().find('.js-image-preview').append('<input type="hidden" value="'+img+'" name="imgUrl[]" /><img src="'+atturl+'" data-id="'+i+'" data-preview-src="" data-preview-group="__IMG_UPLOAD_imgUrl" />');
    	}
    }