*【功能点】tp3.1使用webuploader0.1.5插件多图上传，后台php原生接收

最新推荐文章于 2021-11-21 13:03:11 发布

杨西瓜

最新推荐文章于 2021-11-21 13:03:11 发布

阅读量1.4k

点赞数 3

分类专栏：插件/类库文章标签： webuploader 上传图片插件

本文链接：https://blog.csdn.net/qq_33862644/article/details/79644042

版权

本文介绍了如何在TP3.1框架下，利用webuploader0.1.5插件实现多图上传功能，并详细讲解了前端上传插件代码和后端PHP原生处理上传的代码实现。重点包括图片选择、上传、删除及修改图片信息，特别是前端代码中关于默认值处理和动态添加选项的逻辑。

摘要由CSDN通过智能技术生成

效果：

对应的效果是：
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;" >
                                    <!--点