|
|
文件上传是零碎中很罕用的功用，在Axure中如何利用中继器，制造一个能自动辨认罕用的文件类型的上传列表呢？本文作者分享了制造教程，一同来看一下吧。
cv5h1jdgqa0.jpg
文件上传是零碎中很罕用的功用，所以明天作者就教大家在Axure中如何利用中继器，制造一个能自动辨认罕用的文件类型的上传列表。
一、成果展现
1、点击上传按钮，能够选择当地的文件进行上传。
2、选择文件后，在上传列表中新增该文件，回显选择文件的称号，而且按照文件类型自动辨认婚配对应的图标，案例中做了 罕用的十一种文件的婚配，需求减少的也能够用上面的办法持续减少。
3、鼠标移入对应文件，会有一个高亮的成果，而且显示删除按钮，点击删除按钮能够在列表中删除对应的文件。
rew1rgizqow.jpg
二、制造教程
这个原型次要分问上传列表和上传按钮组两部份组成。
1. 上传列表
上传列表，咱们是用中继器来制造。
1）中继器里所需元件及摆放
图片元件：后续经过交互婚配对应的元件文本标签：后续经过交互回显选中当地文件的文件称号封闭按钮：后续经过交互删除中继器表格中对应的文件信息，默许暗藏配景矩形：默许通明色，悬停款式设置为浅蓝色将以上元件组合在一同，如下图所示摆放。
ahupd1hzkcr.jpg
组合记得勾选触发外部元件鼠标交互款式，这样移入组合就能触发配景矩形的悬停款式。
在鼠标移入组合时，咱们用显示的交互，显示删除按钮，鼠标移入组合的时分，咱们用暗藏的交互，将删除按钮暗藏。
鼠标单击删除按钮时，咱们用删除行的交互，删除中继器里以后行的内容。
2）中继器表格的设置
中继器表格里咱们只需求一列，text对应的就是文件的称号，默许列表的内容在这里填写文件称号便可，后续点击上传选择文件后，对应的文件名也会减少到这里。
ur1asg4xxhi.jpg
3）中继器每项加载时的交互
中继器每项加载时，咱们先用设置文本的交互，将中继器表格里text列的值，设置到中继器里文本标签的元件。
而后咱们要用设置图片的交互，按照不同类型的文件，设置对应的图标，那末这里的原理实际上是按照文件名的后缀来判别，例如后缀是jpg、png、jpeg其实就是图片文件，那咱们就用设置图片的交互，将图片元件设置为图片的图标；后缀是doc、docx其实就是word文件，那咱们就用设置图片的交互，将外面的图片元件设置为word的图片……
咱们先采集罕用文件的图标，而后按照需求设置前提，当知足对应的前提时，就设置对应的图标，案例中咱们设置了十一中罕用的文件类型，包罗word文档、ppt演示文档、excel表格、pdf文档、txt文档、图片、静态图片、音频、视频、紧缩文件、exe顺序文件……你们能够按照需求设置。
最初时分，咱们要做一个不然的前提，就是上传的文件都不合乎下面的后缀称号，简称未知文件，咱们就把图片元件设置为未知的图标。
tru1pik35ow.jpg
那这样上传列表的内容就做完了。
2. 上传按钮组
1）上传按钮组所需元件
上传按钮如由4部份内容组成，包罗按钮、输出框、两个文本标签。
按钮就是用于点击触发上传交互的。
输出框要选择输出类型为文件，这样才有上传成果。
两个文本标签，其中几个咱们命名为text，用于记载选中的文件称号，一个命名为click，用于触发后续交互。
输出框和两个文本标签都是用于逻辑处置的不必于显示的，所以咱们能够把他们放在按钮的下方，用按钮挡住便可。
2）上传按钮组的交互
①鼠标单击上传按钮组的交互
咱们用关上链接的交互，选择链接到URL，在外面咱们能够经过js代码，触发输出框阿谁原件点击的交互，由于输出框类型设置成文件，所以点击他就会弹出当地文件选择的窗口。在选择实现后，咱们将选中的文件称号设置到text的文本标签里，而后click代码触发click元件鼠标单击的交互。以前我在上传列表的教程里有具体的讲授，这里就不展开引见了，不太明确的同窗能够看回我以前的文章。
②click文本标签鼠标单击时的交互
咱们用添加行的交互，由于下面咱们将文件的门路设置到text文本标签外面，所以咱们能够在外面提取到文件称号，将他添加到中继器text列里。这样中继器就会从新加载，按照text列的内容为他选择对应的的图标并显示出来。
然而这里有个问题，就是咱们回显的是文件的门路，例如C:\fakepath\年初总结.ppt，所以在添加行的时分，咱们还要对text元件里记载的文件门路进行处置，处置后才会获取文件称号。
这里咱们要用到两个函数，第一个是lastIndexOf函数，这个函数能够获得某个值最初一次泛起的地位，那咱们用这个函数就能获取\最初一次泛起的地位了。
那接上去咱们就要用到slice函数，slice函数能够截取文本内对应的内容，那末结合下面获取的\最初一次泛起的地位了，咱们再+1位，从这位起开始截取到最初，就是对应的文件称号了。
这样咱们就实现了能自动辨认文件类型的上传列表原型模板了，后续使用也是很便利，默许已上传的文件只需求在中继器表格里填写文件名，便可自动生成交互成果。
以上就是本期教程的整个内容，感兴致的同窗们能够入手试试哦，感激您的浏览，咱们下期见。
本文由 @AI产品人 原创公布于人人都是产品经理，未经许可，阻止转载
题图来自 Unsplash，基于 CC0 协定
该文观念仅代表作者自己，人人都是产品经理平台仅提供信息存储空间办事。 |
|
中级会员