編輯導(dǎo)讀：文件上傳是很多網(wǎng)站常見(jiàn)的一個(gè)基礎(chǔ)功能，本文跟大家分享，如何用Axure完成文件上傳并自動(dòng)產(chǎn)生列表效果，作者從預(yù)覽圖，到所需原件，再到操作步驟都一一展開(kāi)了分析，并對(duì)過(guò)程中需要注意的問(wèn)題進(jìn)行了介紹，希望對(duì)你有所啟發(fā)。

根據(jù)流行的前端視覺(jué)框架，制作了這個(gè)文件上傳的元件，重構(gòu)了交互關(guān)系，所以可定制化程度變高。

Axure本身是帶一個(gè)文件上傳的文本框的，只要在頁(yè)面中放置一個(gè)文本框，并且把這個(gè)文本框的輸入類型變成“文件”，它就自動(dòng)變成了可以選擇文件上傳的表單元素，但是真的很簡(jiǎn)陋，無(wú)法適應(yīng)視覺(jué)個(gè)性化定制，交互方式也有限。

現(xiàn)在前端視覺(jué)框架越來(lái)越成熟，很多公司會(huì)根據(jù)框架創(chuàng)建自己的視覺(jué)規(guī)范，并讓設(shè)計(jì)師在Axure當(dāng)中直接制作高保真原型，從而減少設(shè)計(jì)師與開(kāi)發(fā)之間的溝通成本。所以我根據(jù)流行的前端視覺(jué)框架，制作了這個(gè)文件上傳的元件。

在開(kāi)始制作前，你可以看一下效果預(yù)覽：https://axhub.im/ax9/e354386a7e0f9a92/#g=1

接下來(lái)我們一步一步的實(shí)現(xiàn)這個(gè)功能：

第一步：放置元件

首先在頁(yè)面上放置5個(gè)元件：1個(gè)文本框，3個(gè)矩形，1個(gè)中繼器。

其中的文本框記得設(shè)置輸入類型為“文件”。

第二步：設(shè)置ID

給這幾個(gè)元件設(shè)定ID，分別是：fileButtonChose、fileButtonClick、fileButtonPath、fileButtonList。

圖中藍(lán)色的按鈕是主要交互按鈕，默認(rèn)不需要設(shè)置ID。

第三步：添加交互動(dòng)作

接下來(lái)我們開(kāi)始給每一個(gè)元件添加交互動(dòng)作

1. fileButtonChose ，文本框

主要腳本代碼寫(xiě)在了這個(gè)元件上，通過(guò)Javascript模擬了文件選擇動(dòng)作，并把文件名推送給過(guò)渡元件。選中文本框以后，添加一個(gè)“隱藏”交互動(dòng)作，當(dāng)隱藏時(shí)，打開(kāi)鏈接到URL，然后把javascript代碼貼進(jìn)去。

代碼在這里，可以直接拷貝粘貼

如果你是用的是Axure8，可能會(huì)出bug，這時(shí)候嘗試修改children()[1]；files[0]；這兩個(gè)數(shù)組的序號(hào)，原因是Axure不同版本生成的HTML結(jié)構(gòu)有差異，導(dǎo)致javascript對(duì)象指針錯(cuò)誤。

javascript:
var fileButtonSelect=$("[data-label='[[This.name]]']").children()[1];
 $("[data-label='[[This.name]]']").change(
  function(){
    var fileButtonName=fileButtonSelect.files[0].name;
    $('[]pspan').html(fileButtonName);
    $("[data-label='fileButtonClick']").click();
  });

2. fileButtonClick，矩形

這是一個(gè)過(guò)渡的元件，因?yàn)閖avascript無(wú)法直接操作中繼器，所以使用一個(gè)元件來(lái)觸發(fā)中繼器的動(dòng)作。

添加交互單擊時(shí)使 中繼器fileButtonList添加一行數(shù)據(jù)。

這里使用了一個(gè)局部變量[[LVAR1]]，變量值是fileButtonPath的元件文本

3. fileButtonPath，矩形

這是一個(gè)過(guò)渡的元件，因?yàn)閖avascript無(wú)法直接生成原生交互可以使用的全局變量，所以使用一個(gè)元件文本來(lái)緩存文件名。

這個(gè)元件不需要添加交互。

4. 點(diǎn)擊上傳，矩形

這是可自定義視覺(jué)樣式的主觸發(fā)按鈕。

“點(diǎn)擊上傳”按鈕添加一個(gè)單擊動(dòng)作，填入代碼

javascript:fileButtonSelect.click();

并且設(shè)定移入移出的交互，切換fileButtonChose文本框的隱藏狀態(tài)。

5. fileButtonList，中繼器

中繼器的內(nèi)部元件的結(jié)構(gòu)是這樣的，其中有一個(gè)ID為fileName的矩形，作為文件名的展示，另外還有一個(gè)刪除按鈕，可以對(duì)中繼器的內(nèi)容列表進(jìn)行操作。

整體來(lái)看是這樣：

中繼器fileButtonList的數(shù)據(jù)表暫時(shí)只做了一個(gè)字段PicName，你可以根據(jù)需求增加。

制作完中繼器，我們需要添加一個(gè)交互動(dòng)作，作為加載時(shí)給內(nèi)部的fileName做文本展示。

內(nèi)部的刪除按鈕，可以加上這段交互動(dòng)作

到這里，我們基本完成了整個(gè)元件的功能制作。

創(chuàng)建動(dòng)態(tài)面板

通過(guò)創(chuàng)建動(dòng)態(tài)面板，把不需要顯示的元件隱藏。

為了讓元件看起來(lái)更美觀，我們可以通過(guò)動(dòng)態(tài)面板的可見(jiàn)區(qū)域的設(shè)置完成這個(gè)。

這是Axure系列的第一篇文章，文筆和表達(dá)方式還不成熟，歡迎大家提建議。

演示地址中還有一個(gè)圖片上傳的功能，會(huì)在下一篇文章介紹。

請(qǐng)關(guān)注我，近期會(huì)陸續(xù)推送一系列的Axure個(gè)性化定制文章，目的是方便大家根據(jù)流行的前端框架制定一套與技術(shù)效果一致的交互規(guī)范與視覺(jué)規(guī)范。

作者：ELement；公眾號(hào)：ElementChen

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。