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

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

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

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

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

接下來我們一步一步的實現(xiàn)這個功能：

第一步：放置元件

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

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

第二步：設(shè)置ID

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

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

第三步：添加交互動作

接下來我們開始給每一個元件添加交互動作

1. fileButtonChose ，文本框

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

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

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

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，矩形

這是一個過渡的元件，因為javascript無法直接操作中繼器，所以使用一個元件來觸發(fā)中繼器的動作。

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

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

3. fileButtonPath，矩形

這是一個過渡的元件，因為javascript無法直接生成原生交互可以使用的全局變量，所以使用一個元件文本來緩存文件名。

這個元件不需要添加交互。

4. 點擊上傳，矩形

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

“點擊上傳”按鈕添加一個單擊動作，填入代碼

javascript:fileButtonSelect.click();

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

5. fileButtonList，中繼器

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

整體來看是這樣：

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

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

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

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

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

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

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

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

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

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

作者：ELement；公眾號：ElementChen

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

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