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

中国鑫

原标题：Axure文件上传结果及添加后续交互设置

编辑导语：怎样通过 Axure 来实现文件上传结果以及添加后续交互设置呢？本文作者通过本身的学习，探索出了怎样实现正常的文件上传结果，以及怎样设置上传完的各种其他交互，盼望本文对你有所资助。

编辑导语：怎样通过 Axure 来实现文件上传结果以及添加后续交互设置呢？本文作者通过本身的学习，探索出了怎样实现正常的文件上传结果，以及怎样设置上传完的各种其他交互，盼望本文对你有所资助。

由于Axure自带的文件上传是通过设置输入框范例为File实现的，天生预览后奇丑无比，本文通过一些变通的方法，实现正常的文件上传结果——点击按钮，选择文件，开始上传。

本文利用软件版本：Axure9 英文版，参考文章：《青铜修炼手册：Axure实现文件上传结果》。

该文章轻微改改（拜见步调3）在Axure上是可以实现的对应结果的，但是对一些原理并没有举行解说，本文联合js代码及Chrome调试窗口，具体解说了实现结果及上传完后的交互及其原理，方便以后闻一知十，设置上传完的各种其他交互。

一、拖入须要的控件并定名

一个Button（按钮），一个Text Filed（输入框），一个动态面板Dynamic Panel（动态面板），动态面板里任意放点内容；每个控件都定名一下，分别定名为文件上传按钮，文件上传输入框，正在上传面板，方便后续用。

睁开全文

二、设置输入框范例并将动态面板设为隐蔽

设置输入框范例为File：

三、设置输入框交互

设置输入框变乱Open Link（打开毗连），Link To External URL（链接到url），函数中输入：

java:

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”);

});

java:

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];

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

通过欣赏器F12调试，可知input控件索引是1，大概是Axure版本差别导致。

然后将输入框设置为隐蔽状态：

前端大神应该可以看出来，实在就是一段java代码，这段代码重要是获取输入框控件，定名为f；设置了输入框控件的相应变乱，在相应变乱中，将动态面板设为可见。

至于为什么要设置3个参数，可以通过F12检察前端代码，Axure设置动态面板隐蔽时，这3处都是隐蔽状态：

四、设置按钮交互变乱，隐蔽输入框

按钮OnClick变乱，打开毗连，毗连到url，函数中输入：

java:f.click;

java:f.click;

f就是刚刚输入谁人变量，调用它的click方法，就可以打开文件上传对话框：

五、完成，预览

本文由 @小林 原创发布于大家都是产物司理，未经允许，克制转载

题图来自 Unsplash，基于 CC0 协议返回搜狐，检察更多

责任编辑：