文件上傳是系統(tǒng)中很常用的功能，在Axure中如何利用中繼器，制作一個能自動識別常用的文件類型的上傳列表呢？本文作者分享了制作教程，一起來看一下吧。

文件上傳是系統(tǒng)中很常用的功能，所以今天作者就教大家在Axure中如何利用中繼器，制作一個能自動識別常用的文件類型的上傳列表。

一、效果展示

1、點擊上傳按鈕，可以選擇本地的文件進(jìn)行上傳。

2、選擇文件后，在上傳列表中新增該文件，回顯選擇文件的名稱，并且根據(jù)文件類型自動識別匹配對應(yīng)的圖標(biāo)，案例中做了 常用的11種文件的匹配，需要增加的也可以用下面的方法繼續(xù)增加。

3、鼠標(biāo)移入對應(yīng)文件，會有一個高亮的效果，并且顯示刪除按鈕，點擊刪除按鈕可以在列表中刪除對應(yīng)的文件。

二、制作教程

這個原型主要分問上傳列表和上傳按鈕組兩部分組成。

1. 上傳列表

上傳列表，我們是用中繼器來制作。

1）中繼器里所需元件及擺放

• 圖片元件：后續(xù)通過交互匹配對應(yīng)的元件
• 文本標(biāo)簽：后續(xù)通過交互回顯選中本地文件的文件名稱
• 關(guān)閉按鈕：后續(xù)通過交互刪除中繼器表格中對應(yīng)的文件信息，默認(rèn)隱藏
• 背景矩形：默認(rèn)透明色，懸停樣式設(shè)置為淺藍(lán)色

將以上元件組合在一起，如下圖所示擺放。

組合記得勾選觸發(fā)內(nèi)部元件鼠標(biāo)交互樣式，這樣移入組合就可以觸發(fā)背景矩形的懸停樣式。

在鼠標(biāo)移入組合時，我們用顯示的交互，顯示刪除按鈕，鼠標(biāo)移入組合的時候，我們用隱藏的交互，將刪除按鈕隱藏。

鼠標(biāo)單擊刪除按鈕時，我們用刪除行的交互，刪除中繼器里當(dāng)前行的內(nèi)容。

2）中繼器表格的設(shè)置

中繼器表格里我們只需要一列，text對應(yīng)的就是文件的名稱，默認(rèn)列表的內(nèi)容在這里填寫文件名稱即可，后續(xù)點擊上傳選擇文件后，對應(yīng)的文件名也會增加到這里。

3）中繼器每項加載時的交互

中繼器每項加載時，我們先用設(shè)置文本的交互，將中繼器表格里text列的值，設(shè)置到中繼器里文本標(biāo)簽的元件。

然后我們要用設(shè)置圖片的交互，根據(jù)不同類型的文件，設(shè)置對應(yīng)的圖標(biāo)，那么這里的原理其實是根據(jù)文件名的后綴來判斷，例如后綴是jpg、png、jpeg其實就是圖片文件，那我們就用設(shè)置圖片的交互，將圖片元件設(shè)置為圖片的圖標(biāo)；后綴是doc、docx其實就是word文件，那我們就用設(shè)置圖片的交互，將里面的圖片元件設(shè)置為word的圖片……

我們先收集常用文件的圖標(biāo)，然后根據(jù)需要設(shè)置條件，當(dāng)滿足對應(yīng)的條件時，就設(shè)置對應(yīng)的圖標(biāo)，案例中我們設(shè)置了11中常用的文件類型，包括word文檔、ppt演示文檔、excel表格、pdf文檔、txt文檔、圖片、動態(tài)圖片、音頻、視頻、壓縮文件、exe程序文件……你們可以根據(jù)需要設(shè)置。

最后時候，我們要做一個否則的條件，就是上傳的文件都不符合上面的后綴名稱，簡稱未知文件，我們就把圖片元件設(shè)置為未知的圖標(biāo)。

那這樣上傳列表的內(nèi)容就做完了。

2. 上傳按鈕組

1）上傳按鈕組所需元件

上傳按鈕如由4部分內(nèi)容組成，包括按鈕、輸入框、兩個文本標(biāo)簽。

按鈕就是用于點擊觸發(fā)上傳交互的。

輸入框要選擇輸入類型為文件，這樣才有上傳效果。

兩個文本標(biāo)簽，其中幾個我們命名為text，用于記錄選中的文件名稱，一個命名為click，用于觸發(fā)后續(xù)交互。

輸入框和兩個文本標(biāo)簽都是用于邏輯處理的不用于顯示的，所以我們可以把他們放在按鈕的下方，用按鈕擋住即可。

2）上傳按鈕組的交互

①鼠標(biāo)單擊上傳按鈕組的交互

我們用打開鏈接的交互，選擇鏈接到URL，在里面我們可以通過js代碼，觸發(fā)輸入框那個原件點擊的交互，因為輸入框類型設(shè)置成文件，所以點擊他就會彈出本地文件選擇的窗口。在選擇完成后，我們將選中的文件名稱設(shè)置到text的文本標(biāo)簽里，然后click代碼觸發(fā)click元件鼠標(biāo)單擊的交互。之前我在上傳列表的教程里有詳細(xì)的講解，這里就不展開介紹了，不太明白的同學(xué)可以看回我之前的文章。

②click文本標(biāo)簽鼠標(biāo)單擊時的交互

我們用添加行的交互，因為上面我們將文件的路徑設(shè)置到text文本標(biāo)簽里面，所以我們可以在里面提取到文件名稱，將他添加到中繼器text列里。這樣中繼器就會重新加載，根據(jù)text列的內(nèi)容為他選擇對應(yīng)的的圖標(biāo)并顯示出來。

但是這里有個問題，就是我們回顯的是文件的路徑，例如C:\fakepath\年終總結(jié).ppt，所以在添加行的時候，我們還要對text元件里記錄的文件路徑進(jìn)行處理，處理后才會獲得文件名稱。

這里我們要用到兩個函數(shù)，第一個是lastIndexOf函數(shù)，這個函數(shù)可以獲取某個值最后一次出現(xiàn)的位置，那我們用這個函數(shù)就可以獲得\最后一次出現(xiàn)的位置了。

那接下來我們就要用到slice函數(shù)，slice函數(shù)可以截取文本內(nèi)對應(yīng)的內(nèi)容，那么結(jié)合上面獲得的\最后一次出現(xiàn)的位置了，我們再+1位，從這位起開始截取到最后，就是對應(yīng)的文件名稱了。

這樣我們就完成了能自動識別文件類型的上傳列表原型模板了，后續(xù)使用也是很方便，默認(rèn)已上傳的文件只需要在中繼器表格里填寫文件名，即可自動生成交互效果。

以上就是本期教程的全部內(nèi)容，感興趣的同學(xué)們可以動手試試哦，感謝您的閱讀，我們下期見。