编者按:如何通过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.完成并预览