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

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

总结:

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

相关推荐
Three~stone3 天前
Axure RP 9.0 是干啥?附安装教程和安装包
axure
梓贤Vigo5 天前
【Axure教程】字母定位选择器
交互·产品经理·axure·原型·中继器
梓贤Vigo7 天前
【Axure原型分享】能上下拖动和滚动查看内容的中继器表格
交互·产品经理·axure·原型·中继器
xy34537 天前
Axure 9.0 原生组件:让折线图实现动态交互(文本标签)
ui·交互·axure·原型·折线图
xy34538 天前
Axure 9.0 原生组件:绘制折线图
ui·信息可视化·交互·axure·原型·折线图
xy345311 天前
Axure 9.0 原生组件:让柱图实现动态交互(文本标签)
ui·交互·axure·原型·柱状图
梓贤Vigo12 天前
【Axure视频教程】拖动和滚动效果
交互·产品经理·axure·原型·教程
探索未知的自己12 天前
Axure RP 9 制作登录页面过程
axure
梓贤Vigo13 天前
【Axure原型分享】字母分类选择器
交互·产品经理·axure·原型·中继器