效果:
对应的效果是:
1、上传图片:选择图片-》开始上传图片(上传成功后)-》会显示上传成功 && 可以通过下拉框和文本框,一起上传
2、删除图片:点击删除,删除整个节点
3、修改图片附属信息:就是修改下拉框和文本框中的值
亮点在于:
1、前端代码的38行,由于我这是存到3个字段,用户不选,会存个默认值,所以会有对应的关系。这样我取值的时候,就可以用图片的$k,因为图片的$k和$imgType的$type_k下标一样
2、下拉框和文本框是通过 后端上传成功后,动态添加的。可不删图片修改值
前端插件代码:
前端代码,保存在php文件中
<body>
<tr>
<th>
教学资质
<div>上传图片</div>
</th>
<td>
<!-- 如果 是空字符串就隐藏,否则就显示xxx_type对应前台是证书名称,xxx_names对应前台是证书编号-->
<span>已上传的图片:</span>
<div style="overflow: hidden" imgUrl="<?php echo $data['teacher_aptitude_imgs'];?>" id="is_show_img" >
<!-- 查出来的字符串转数组,然后遍历显示-->
<!--图片类型(对应前台证书名称)-->
<?php $imgType = explode(',',$data['teacher_aptitude_imgs_type']);
foreach ($imgType as $type_k => $type_v):
?>
<?php endforeach;?>
<!--图片名称(对应前台证书编号)-->
<?php $imgName = explode(',',$data['teacher_aptitude_imgs_names']);
foreach ($imgName as $name_k => $name_v):
?>
<?php endforeach;?>
<!--图片地址-->
<?php $imgArr = explode(',',$data['teacher_aptitude_imgs']);
foreach ($imgArr as $k => $v):
?>
<div style="border:1px solid #CCCCCC;overflow: hidden;">
<div style="float: left;width: 33.3%;" class="del_img">
<div class="del_node">
<img src="http://<?php echo $v;?>" style="width:100px;height:100px;" >
<!--点