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),再把元件位置放在【按键】下面(推荐,因为在元件在一起方便管理)

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

总结:

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

相关推荐
测试修炼手册5 天前
[测试工具] Axhub MCP:把 Axure PRD 变成测试用例
测试工具·测试用例·axure
梓贤Vigo6 天前
【Axure原型分享】AI自动回复机器人
交互·产品经理·axure·原型
xy34538 天前
Axure9.0中继器-初识篇
产品经理·axure·原型
Chensay.12 天前
Axure RP安装(已汉化)附下载地址
axure·结构设计
招风的黑耳13 天前
Axure动态柱状图设计指南:从静态到交互的完整实现
交互·axure·柱状图
招风的黑耳13 天前
Axure动态折线图设计指南:从静态到交互的完整实现
交互·axure·photoshop
招风的黑耳13 天前
智慧社区可视化平台:构建“现实-数字“双生社区的智能中枢
axure·原型·可视化
x***r15118 天前
AxureRP-Setup安装步骤详解(附Axure RP原型设计与汉化教程)
ui·axure·photoshop
AC赳赳老秦21 天前
OpenClaw与Axure联动:自动生成原型图组件、批量修改原型样式,提升设计效率
python·web安全·ui·音视频·axure·photoshop·openclaw
秋921 天前
Axure RP Extension for Chrome 安装与配置完全指南:解决本地原型查看限制的深度解析与实践
chrome·axure·photoshop