1. 主页 > 行业资讯 > 设计文章 >

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

编者按:如何通过Axure上传文件和添加后续交互设置?作者通过自己的学习,探索了如何实现正常的文件上传效果,以及上传后如何设置其他各种交互。希望这篇文章对你有帮助。

由于Axure自带的File上传是通过设置输入框类型为File来实现的,生成预览后极其难看,所以本文采用了一些灵活的方法来实现正常的文件上传效果——点击按钮,选择文件,开始上传。

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

本文稍微改变了(见步骤Axure上可以达到的相应效果,但是没有解释一些原理。本文结合js代码和Chrome调试窗口,详细说明了实现效果和上传后的交互及其原理,方便用户在上传后进行推论和设置其他各种交互。

首先,拖动必要的控件并命名它们

一个按钮(Button),一个文本字段(输入框),一个动态面板(Dynamic Panel),在动态面板里放一些内容;每个控件被命名为文件上传按钮、文件上传输入框和上传面板,供后续使用。

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

将输入框类型设置为文件:

第三,设置输入框交互

将输入框设置为加载事件打开链接,链接到外部网址,并在函数中输入:

javascript:

var f = $(& # 8220;【数据-标签= & # 8217;文件上传输入框& # 8217;]”).children()[1];

$(“【数据-标签= & # 8217;文件上传输入框& # 8217;]”).change(function(){

$(“【数据-标签= & # 8217;上传面板& # 8217;]”).attr(& # 8220;风格& # 8221;,”显示:块;”);

$(“【数据-标签= & # 8217;上传面板& # 8217;]”).attr(& # 8220;class & # 8221,”ax _ default & # 8221);

$(“【数据-标签= & # 8217;上传面板& # 8217;]”).CSS(& # 8220;能见度& # 8221;, “可见& # 8221;);

});

这里和参考文章有点不一样,就是:

var f = $(& # 8220;【数据-标签= & # 8217;文件上传输入框& # 8217;]”).children()[0];

用浏览器F12调试显示输入控件的索引为1,可能是Axure版本不同造成的。

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

前端上帝应该能看出来其实是个javascript代码。这段代码主要是获取输入框控件,命名为F;设置输入框控件的响应事件,并将动态面板设置为在响应事件中可见。

至于为什么要设置三个参数,可以通过F12查看前端代码。当Axure将动态面板设置为隐藏时,这三个点都被隐藏:

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

按钮单击事件,打开连接,连接到url,然后输入:

JavaScript:f . click();

f是刚输入的变量。调用其click方法打开文件上传对话框:

5.完成并预览

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/506.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息