可以更改样式与文字的选择文件功能

今天在群里看到了一个需求。

有一位群友想将选择文件元件的文字修改成自己想要的文字。

我们通过将文本框设置为“文件”类型,就能够进行本地文件的选择。

不过这个设置在浏览器中显示文字的也不一致,谷歌浏览器是“选择文件”,火狐浏览器是“浏览...”。

而且,按钮的样式也不能随意改变。

为了解决这个问题,我通过查询JQuery的相关资料,找到了通过JS解决这个问题的方案。

效果如下:

上图中我用了一个文件的形状元件实现了点击时打开文件选择窗口的交互效果。

如果你对JS一无所知,也没有关系。

你可以下载本教程的源文件,将选择文件的形状元件更改形状、样式以及文本满足自己的需求,就能够复制到自己的原型中使用了。

例如:

需要注意的是,不要随意修改元件的命名,如果修改需要同步修改JS代码中与之对应的名称。

接下来,我们一起来看它的实现的过程。

首先,我们来整理思路。

1、我们需要一个文本框元件用于打开选择文件的窗口,所以在载入时要获取到这个元件的控制权;

2、当选择文件之后,也就是文本框发生改变时,我们要将文本框获取的文件路径显示出来;

3、选择文件的按钮是一个形状,我们需要点击形状时触发文本框元件的点击交互。

然后,我们准备需要使用的元件。

文本框和显示文件路径的元件都要命名,因为在JS代码中,我们需要通过它们的名称对它们进行控制。

最后,我们通过JS代码来帮助我们实现功能。

1、将文本框“SelectFile”的类型设置为“文件”,并隐藏这个元件。然后,在元件【载入时】通过【打开链接】于“当前窗口”的动作加载JS代码。这段JS代码帮助我们获取了文本框的控制权,并且在文本框发生改变时,将文本框的值(文件路径)添加到了元件“FilePath”的文本中。

提示:如果选择文件后不想显示路径,只想显示文件名的话,只要将代码中的“f.value”替换为“f.value.substr(f.value.lastIndexOf("\\")+1)”即可。

2、为选择文件的形状元件添加【鼠标单击时】的交互,同样通过【打开链接】于“当前窗口”的动作执行JS代码。这段代码是调用了文本框元件的“click()”函数,这个函数就是用来打开本地的文件选择窗口。

通过上面两步,我们就完成了一个选择文件功能的制作。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

我不想通过把下载链接放入微信订阅号,强迫大家去关注,不过,我非常建议大家去关注,因为订阅之后能够第一时间看到本站最新的内容发布。

源文件下载:http://downloads.iaxure.com/select_file.rp

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------【点此查看详情】


转载请注明:Axure原创教程网 » 可以更改样式与文字的选择文件功能

喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 嗯,是挺屌的,你还能再屌点儿吗?
    哦哦2018-08-28 10:29 回复
  2. 不错
    天天2018-08-29 13:52 回复