在移动端应用中，提供多选图片上传功能对于用户体验和功能性具有重要意义，尤其是在像微信、微博等社交媒体平台上。

例如用户可以快速上传多张图片进行分享，发布相册或创建图文并茂的动态；卖家可以一次性上传多个产品图片，提高商品展示效果；房主或中介可以上传多张房屋照片，提供更全面的房产展示；用户可以上传多张活动照片，参与比赛或活动分享。

所以今天作者就教大家怎么在Axure用中继器制作多选上传图片的原型模板，具体效果如下所示：

在相册页里可以选择多个图片，案例中限制数为9，达到限制数继续选择会弹窗提示

原型地址：;p=上传图片（多图）

制作这个主要分为三个部分，包括主页面、相册页面（选择图片）、大图页面

主页面如下图所示，我们用中继器来制作，在中继器里面添加图片元件，选择网格分布，每行3个，多页显示，一页最多显示9个

中继器表格里我们需要两3列内容，no列用于对图片的排序，picture列用于存放图片，name列用于记录图片名。第一行no列默认为0，导入+号的图片。

中继器载入时，我们用排序的交互，对no列进行排序，按降序排列，这样我们后续选中图片，设置no值比0大，这样添加按钮就可以永远在最后一张图，如果上传了9张，因为每页显示9，所以添加按钮就到达第二页，就默认看不到了。

相册页面主要有中继器，按钮，矩形组成，如下图所示摆放

中继器里面包括图片元件和多选按钮，案例中多选按钮由形状制作而成，可以简单理解为一个选中的样式（√），一个没选中的样式（圆圈）

中继器表格里主要有以下几列，picture列：用于存放图片；name列：记录图片名；xuanzhong列：控制是否选中

我们用xuanzhong列的值控制多选按钮是否选中，如果值等于1，就是选择，否则就未选中。我们按照这个逻辑设置多选按钮，用显示和隐藏的交互，如果xuanzhong列的值等于1，就显示选中、影藏未选中，否则就显示未选中，隐藏选中

如果选中列的值不为1，就是要从未选中变成选中，原则上我们也是用更新行的交互，将当前行更新为1即可。不过这里有个逻辑要处理，因为我们最多上传9张，像微信朋友圈微博很多移动端都是这个逻辑，所以我们还需要判断选中了几张

这里我们需要在中继器每项加载时用一个文本来记录，在第一行加载的时候，设置文本值为0，如果选中列的值为1就用设置文本的交互，将他设置为原来的值+1，这样就可以记录到有选中了几个，再用设置文本的交互，将已选数量设置到选择按钮上。

然后我们就要把选中的图片信息添加到主页的中继器里，这里我们用添加行的交互即可，在选中的条件下，即xuanzhong列的值等于1，我们用添加行的交互，将当前中继器表格里的值设置添加到主页的中继器即可，添加行的时候no列的值填写1，比0大就可以了。

这里需要注意的是，因为每次更新中继器都会重新读取，为了避免重复添加，我们用在中继器开始加载时，要先做删除行的操作，删除的条件就是除了no列=0的其他列删除

我们把中继器右键转为动态面板，如果图片太多，超过一个页面的高度，我们还可以再次转为动态面板，然后用拖动外面板移动内面板的交互，让他可以上下拖动选择更多。

然后我们把这个页面所有内容右键转为动态面板，右键固定在左上角，鼠标单击关闭按钮或者选择按钮时，用隐藏的交互，将该面板隐藏即可。

大图页面包含图片元件，删除和返回按钮，文本标签，矩形等，如下图所示摆放，放在上面相册页面的第二个状态页里

然后用设置图片的交互，将中继器里当前行的图片值设置到大图元件里，然后用设置文本交互，将name列的值设置到标题元件里。这里还需要一个默认隐藏用于记录名称的元件，把名字设置进去，这样后续离开中继器后才知道要更新那条数据。

这样我们就完成了移动端多选图片上传的原型模板了，后续使用也很方便，只需要在中继器表格里导入图片填写对应的信息，预览后即可自动生成对应的效果。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由@AI产品人原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash，基于CC0协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。