【Axure教程】自动识别文件类型的上传列表

259 篇文章 24 订阅
123 篇文章 7 订阅

文件上传是系统中很常用的功能,所以今天作者就教大家在Axure中如何利用中继器,制作一个能自动识别常用的文件类型的上传列表。

一、效果展示

1、点击上传按钮,可以选择本地的文件进行上传

2、选择文件后,在上传列表中新增该文件,回显选择文件的名称,并且根据文件类型自动识别匹配对应的图标,案例中做了常用的11种文件的匹配,需要增加的也可以用下面的方法继续增加。

3、鼠标移入对应文件,会有一个高亮的效果,并且显示删除按钮,点击删除按钮可以在列表中删除对应的文件。

 

原型地址:

https://axhub.im/ax9/c37e5a44490491be/#g=1&p=文件上传列表(含文件识别)

二、制作教程

这个原型主要分问上传列表和上传按钮组两部分组成

1、上传列表

上传列表,我们是用中继器来制作

1、1中继器里所需元件及摆放

图片元件:后续通过交互匹配对应的元件

文本标签:后续通过交互回显选中本地文件的文件名称

关闭按钮:后续通过交互删除中继器表格中对应的文件信息,默认隐藏

背景矩形:默认透明色,悬停样式设置为浅蓝色

将以上元件组合在一起,如下图所示摆放。

组合记得勾选触发内部元件鼠标交互样式,这样移入组合就可以触发背景矩形的悬停样式

在鼠标移入组合时,我们用显示的交互,显示删除按钮,鼠标移入组合的时候,我们用隐藏的交互,将删除按钮隐藏

鼠标单击删除按钮时,我们用删除行的交互,删除中继器里当前行的内容

1、2中继器表格的设置

中继器表格里我们只需要一列,text对应的就是文件的名称,默认列表的内容在这里填写文件名称即可,后续点击上传选择文件后,对应的文件名也会增加到这里。

1、3中继器每项加载时的交互

中继器每项加载时,我们先用设置文本的交互,将中继器表格里text列的值,设置到中继器里文本标签的元件。

然后我们要用设置图片的交互,根据不同类型的文件,设置对应的图标,那么这里的原理其实是根据文件名的后缀来判断,例如后缀是jpg、png、jpeg其实就是图片文件,那我们就用设置图片的交互,将图片元件设置为图片的图标;后缀是doc、docx其实就是word文件,那我们就用设置图片的交互,将里面的图片元件设置为word的图片……

我们先收集常用文件的图标,然后根据需要设置条件,当满足对应的条件时,就设置对应的图标,案例中我们设置了11中常用的文件类型,包括word文档、ppt演示文档、excel表格、pdf文档、txt文档、图片、动态图片、音频、视频、压缩文件、exe程序文件……你们可以根据需要设置

最后时候,我们要做一个否则的条件,就是上传的文件都不符合上面的后缀名称,简称未知文件,我们就把图片元件设置为未知的图标。

那这样上传列表的内容就做完了

2、上传按钮组

2、1上传按钮组所需元件

上传按钮如由4部分内容组成,包括按钮、输入框、两个文本标签

按钮就是用于点击触发上传交互的

输入框要选择输入类型为文件,这样才有上传效果

两个文本标签,其中几个我们命名为text,用于记录选中的文件名称,一个命名为click,用于触发后续交互。

输入框和两个文本标签都是用于逻辑处理的不用于显示的,所以我们可以把他们放在按钮的下方,用按钮挡住即可。

2、2上传按钮组的交互

鼠标单击上传按钮组的交互

我们用打开链接的交互,选择链接到URL,在里面我们可以通过js代码,触发输入框那个原件点击的交互,因为输入框类型设置成文件,所以点击他就会弹出本地文件选择的窗口。在选择完成后,我们将选中的文件名称设置到text的文本标签里,然后click代码触发click元件鼠标单击的交互。之前我在【Axure教程】上传列表(本地文件结合中继器)里有详细的讲解,这里就不展开介绍了,不太明白的同学可以看回我之前的文章。

click文本标签鼠标单击时的交互

我们用添加行的交互,因为上面我们将文件的路径设置到text文本标签里面,所以我们可以在里面提取到文件名称,将他添加到中继器text列里。这样中继器就会重新加载,根据text列的内容为他选择对应的的图标并显示出来。

但是这里有个问题,就是我们回显的是文件的路径,例如C:\fakepath\年终总结.ppt,所以在添加行的时候,我们还要对text元件里记录的文件路径进行处理,处理后才会获得文件名称。

这里我们要用到两个函数,第一个是lastIndexOf函数,这个函数可以获取某个值最后一次出现的位置,那我们用这个函数就可以获得\最后一次出现的位置了。

那接下来我们就要用到slice函数,slice函数可以截取文本内对应的内容,那么结合上面获得的\最后一次出现的位置了,我们再+1位,从这位起开始截取到最后,就是对应的文件名称了。

这样我们就完成了能自动识别文件类型的上传列表原型模板了,后续使用也是很方便,默认已上传的文件只需要在中继器表格里填写文件名,即可自动生成交互效果。

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Axure是一款功能强大的原型设计工具,可以帮助设计师创建交互式的原型模型。其中,上文件效果也是Axure具备的功能之一。 在Axure中,可以使用“上文件”组件来实现上文件的效果。首先,我们需要在页面上放置一个“上文件”组件,可以是按钮或者文本框等。然后,在该组件的交互事件中,设置对应的触发动作。 对于上文件的效果,一般有两种常见的交互方式:单文件和多文件。 对于单文件,点击“上文件”组件后,可以弹出一个文件选择对话框,用户可以在对话框中选择要上文件。在选择文件后,可以通过Axure提供的变量或者动态面板来显示已选择的文件名称,以便用户确认上文件。同时,可以添加一个“上”按钮,在用户点击该按钮后,可以执行文件的操作。 对于多文件,操作类似于单文件,只是用户可以选择多个文件进行上。可以考虑使用多选文件的对话框,或者通过可拖拽的方式,将多个文件拖拽到上区域。 除了基本的功能外,还可以进一步定制上文件的效果。例如,可以添加文件类型限制,只允许上某些特定类型文件;或者添加文件大小限制,限制上文件的大小范围;还可以添加上进度条,以及上成功或失败的提示信息等。 总之,通过使用Axure的上文件组件和交互功能,我们可以灵活地实现各种上文件的效果,提升原型设计的交互性和用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梓贤Vigo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值