AxureRP9实例-上传附件教程,并且美化上传元件SL090002

实例说明

因为Axure自带的文件上传是通过设置输入框类型为File实现的,生成预览后奇丑无比,本文通过一些变通的方法,实现正常的文件上传效果------点击按钮,选择文件,开始上传。

实例效果

效果展示:点击查看

实例原理

1、自带交互:就是将input输入框元件,将【文本】属性修改为【文件】属性

2、美化按键:在自制美化的上传按键上,加一个JS代码绑定即可

实例教程

1、新建2个元件【按钮】【文本框】

2、选中【文本框】元件,右边找到【交互】【文本框属性】【输入类型】修改为【文件】

3、完成到这样,预览一下,就已经有效果了,但是自带的上传附件样式太丑,也不能修改所以我们现在自制一个美化的按钮,具体如果美化你们自己去做了,我这里只是教大家如何用其他元件如何绑定交互事件。

4、将【文本框】自定义一个名称(建议英文,比如:UpFile)

5、现在选中【按钮】元件,【交互】,事件【单击】,动作【打开链接】,链接到选择【链接到URL或文件路径】,值输入下面这段代码(其中:UpFile 是文本框自定义名称,可以修改成你的自定义)

复制代码
javascript: $("[data-label='UpFile']").children('input[type="file"]').click();

这样就算绑定交互效果,预览一下效果看看。

6、最后一步,就是把【文本框】元件给隐藏起来,只显示我们自制的上传按键。

方法一:修改文本框元件大小(比如10x10),再把元件位置放在【按键】下面(推荐,因为在元件在一起方便管理)

方法二:把【文本框】元件隐藏,再移到页面外

总结:

这里只是演示,所以按键也是原始按键,怎么美化大家可以自行设计。主要是教小伙伴们如果绑定事件。

相关推荐
xy34534 天前
Axure9.0 热区典型实战使用场景
ui·axure·原型·产品设计
充值内卷4 天前
把 Visio 和 Axure 塞进一个 1.5 MB 的 exe:Visioxure 的架构与取舍
架构·axure
充值内卷4 天前
Visio、Axure、draw.io、ProcessOn、墨刀、Figma:六款工具哪个该干哪件事
axure·draw.io·processon
xy34538 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy34538 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计
汉派日月土申16 天前
【移动元件库】8.时间轴
产品经理·axure
结构化知识课堂18 天前
Axure产品原型设计:AI能画原型了,为什么你还得懂这些术语?
人工智能·axure·原型设计·ai产品经理
xy345322 天前
Axure 9.0 动态面板基本操作
前端·ui·html·axure·原型·产品设计
结构化知识课堂23 天前
AI产品设计思维:需求分析的新变化(与传统软件的区别)
人工智能·产品经理·axure·需求分析·ai产品经理·数据产品经理
xy34531 个月前
Axure 9.0 中继器核心结构
前端·ui·html·axure·原型·产品设计