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

　　步骤

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

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

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

　　设置输入框类型为File

　　3、设置输入框交互

　　设置输入框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处都是隐藏状态

　　4、设置按钮交互事件，隐藏输入框

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

　　javascript:f.click();

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

　　5、完成，预览

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。