Axure文件上传效果及添加后续交互设置

小林
2 评论 8557 浏览 7 收藏 6 分钟
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

编辑导语:如何通过 Axure 来实现文件上传效果以及添加后续交互设置呢?本文作者通过自己的学习,探索出了如何实现正常的文件上传效果,以及如何设置上传完的各种其他交互,希望本文对你有所帮助。

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

本文使用软件版本:Axure9 英文版,参考文章:《青铜修炼手册:Axure实现文件上传效果》。

该文章稍微改改(参见步骤3)在Axure上是可以实现的对应效果的,但是对一些原理并没有进行讲解,本文结合js代码及Chrome调试窗口,详细讲解了实现效果及上传完后的交互及其原理,方便以后举一反三,设置上传完的各种其他交互。

一、拖入必要的控件并命名

一个Button(按钮),一个Text Filed(输入框),一个动态面板Dynamic Panel(动态面板),动态面板里随便放点内容;每个控件都命名一下,分别命名为文件上传按钮,文件上传输入框,正在上传面板,方便后续用。

二、设置输入框类型并将动态面板设为隐藏

设置输入框类型为File:

三、设置输入框交互

设置输入框OnLoad事件Open Link(打开连接),Link To External URL(链接到url),函数中输入:

javascript:

var f=$(“[data-label=’文件上传输入框’]”).children()[1];

$(“[data-label=’文件上传输入框’]”).change(function(){

$(“[data-label=’正在上传面板’]”).attr(“style”,”display:block;”);

$(“[data-label=’正在上传面板’]”).attr(“class”,”ax_default”);

$(“[data-label=’正在上传面板’]”).css(“visibility”, “visible”);

});

此处和参考文章有点差别,参考文章中是:

var f=$(“[data-label=’文件上传输入框’]”).children()[0];

通过浏览器F12调试,可知input控件索引是1,可能是Axure版本不同导致。

然后将输入框设置为隐藏状态:

前端大神应该可以看出来,其实就是一段javascript代码,这段代码主要是获取输入框控件,命名为f;设置了输入框控件的响应事件,在响应事件中,将动态面板设为可见。

至于为什么要设置3个参数,可以通过F12查看前端代码,Axure设置动态面板隐藏时,这3处都是隐藏状态:

四、设置按钮交互事件,隐藏输入框

按钮OnClick事件,打开连接,连接到url,函数中输入:

javascript:f.click();

f就是刚刚输入那个变量,调用它的click方法,就可以打开文件上传对话框:

五、完成,预览

 

本文由 @小林 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 并不好使,也不知道哪里出了问题

    来自北京 回复
  2. 文件可以传一下吗,百度云盘,谢谢

    来自广东 回复
专题
36067人已学习18篇文章
好的数据分析可以使我们的产品不断优化,而做好数据分析的第一步就是做好数据埋点。
专题
11860人已学习12篇文章
对着互联网行业的不断发展,如今很多传统行业都与互联网想结合,医药行业也不例外。本文作者分享了关于互联网医疗的运营知识。
专题
13518人已学习12篇文章
需求管理,也是产品运营人工作中非常重要的一个任务。本专题的文章分享了如何做需求管理。
专题
17514人已学习14篇文章
RFM模型是与用户价值相关的常见模型之一。本专题的文章分享了什么是RFM模型?如何应用RFM模型?
专题
12137人已学习12篇文章
很多公司都在谈论数字化转型,而数字化的基础即是大量的、繁杂的、高度业务关联的基础数据。数字化运营是其中的一个分支。本专题的文章分享了如何做好数字化运营。
专题
13743人已学习11篇文章
本专题的文章以To G领域为例,从产品经理的角度,分享TO G产品设计指南。