編輯導語：如何通過 Axure 來實現(xiàn)文件上傳效果以及添加后續(xù)交互設(shè)置呢？本文作者通過自己的學習，探索出了如何實現(xiàn)正常的文件上傳效果，以及如何設(shè)置上傳完的各種其他交互，希望本文對你有所幫助。

因為Axure自帶的文件上傳是通過設(shè)置輸入框類型為File實現(xiàn)的，生成預(yù)覽后奇丑無比，本文通過一些變通的方法，實現(xiàn)正常的文件上傳效果——點擊按鈕，選擇文件，開始上傳。

本文使用軟件版本：Axure9?英文版，參考文章：《青銅修煉手冊：Axure實現(xiàn)文件上傳效果》。

該文章稍微改改（參見步驟3）在Axure上是可以實現(xiàn)的對應(yīng)效果的，但是對一些原理并沒有進行講解，本文結(jié)合js代碼及Chrome調(diào)試窗口，詳細講解了實現(xiàn)效果及上傳完后的交互及其原理，方便以后舉一反三，設(shè)置上傳完的各種其他交互。

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

一個Button（按鈕），一個Text Filed（輸入框），一個動態(tài)面板Dynamic?Panel（動態(tài)面板），動態(tài)面板里隨便放點內(nèi)容；每個控件都命名一下，分別命名為文件上傳按鈕，文件上傳輸入框，正在上傳面板，方便后續(xù)用。

二、設(shè)置輸入框類型并將動態(tài)面板設(shè)為隱藏

設(shè)置輸入框類型為File：

三、設(shè)置輸入框交互

設(shè)置輸入框OnLoad事件Open Link（打開連接），Link To External URL（鏈接到url），函數(shù)中輸入：

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調(diào)試，可知input控件索引是1，可能是Axure版本不同導致。

然后將輸入框設(shè)置為隱藏狀態(tài)：

前端大神應(yīng)該可以看出來，其實就是一段javascript代碼，這段代碼主要是獲取輸入框控件，命名為f；設(shè)置了輸入框控件的響應(yīng)事件，在響應(yīng)事件中，將動態(tài)面板設(shè)為可見。

至于為什么要設(shè)置3個參數(shù)，可以通過F12查看前端代碼，Axure設(shè)置動態(tài)面板隱藏時，這3處都是隱藏狀態(tài)：

四、設(shè)置按鈕交互事件，隱藏輸入框

按鈕OnClick事件，打開連接，連接到url，函數(shù)中輸入：

javascript:f.click();

f就是剛剛輸入那個變量，調(diào)用它的click方法，就可以打開文件上傳對話框：

五、完成，預(yù)覽

本文由 @小林 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議