編輯導(dǎo)語：如何不通過文本框的File功能實現(xiàn)Axure文件上傳效果？本篇文章里，作者便總結(jié)、梳理了一份Axure教程，幫助你簡單實現(xiàn)上傳進度條遞增效果，讓交互頁面更加生動有趣，一起來看一下吧。

大家都知道，Axure可以通過設(shè)置輸入框的類型為File模擬實現(xiàn)文件上傳效果，但是效果比較丑。

實現(xiàn)本期將分享如何不通過文本框的File功能，只需一個按鈕，即可實現(xiàn)Axure文件上傳效果即上傳成功后進度條遞增效果，讓按鈕的樣式和交互流程更加生動有趣（感謝wave大神分享）。

教程使用軟件版本為漢化后的Axure8。

一、實現(xiàn)步驟

1）從元件庫面板中拖入一個矩形、文本標(biāo)簽，分別命名文本框為【按鈕】和【提示語】如下圖所示：

2）再從元件庫面板中拖入兩個矩形（分別填充綠色，命名progress和灰色，命名背景條）、兩個文本標(biāo)簽（文件名和刪除）以及成功圖標(biāo)。最后將它們選中，鼠標(biāo)右鍵轉(zhuǎn)為動態(tài)面板，并命名為Success，用來模擬上傳成功進度條效果。

二、添加交互

1）選中【按鈕】，添加【單擊時】交互，添加【打開鏈接】動作，勾選【鏈接到URL】，點擊右側(cè)的【fx】，添加代碼，如圖所示：

代碼如下：

javascript:openFile(txt=>{ $axure(“@Success”).show(); });

2）再給【按鈕】添加【載入時】交互，操作如上一致，代碼如下：

javascript:
window.openFile = function (callBack) {
var element = document.createElement(‘input’);
element.setAttribute(‘type’, “file”);
element.setAttribute(‘id’, “btnOpenFile”);
element.onchange = function () {
readText(this, callBack);
document.body.removeChild(this);
};
element.style.display = ‘none’;
document.body.appendChild(element);
element.click();
};
window.readText = function (filePath, callBack) {
var reader;
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
} else {
console.log(‘你的瀏覽器不支持此功能!’);
return false;
}
var output = “”;
if (filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
callBack(output);
};
reader.readAsText(filePath.files[0]);
} else {
return false;
}
return true;
}

3）接下來給動態(tài)面板【Success】添加【顯示時】交互事件，設(shè)置旋轉(zhuǎn)?→ 經(jīng)過0 → 順時針，錨點為中心。

4）最后給進度條增加完成100%時的判斷，隱藏刪除按鈕，顯示成功圖標(biāo)的交互。選中【progress】，添加【旋轉(zhuǎn)時】交互事件，設(shè)置尺寸，勾選當(dāng)前元件，設(shè)置寬度為：[[This.width + 4]]（即自身寬度加4）。

同時，給此交互添加判斷條件：當(dāng)進度條的寬度小于背景條的寬度時，執(zhí)行上面的交互。

接下來，再添加循環(huán)交互，添加等待時間和觸發(fā)事件，讓進度條逐漸變寬，如下圖所示：

最后，只需要添加另一個狀態(tài)即進度條為100%狀態(tài)時，詳細交互如下：

三、效果預(yù)覽

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

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