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

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

一、效果展示

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

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

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

原型地址：https://2hp47o.axshare.com/#g=1

二、制作教程

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

1. 上傳列表

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

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

• 圖片元件：后續通過交互匹配對應的元件
• 文本標簽：后續通過交互回顯選中本地文件的文件名稱
• 關閉按鈕：后續通過交互刪除中繼器表格中對應的文件信息，默認隱藏
• 背景矩形：默認透明色，懸停樣式設置為淺藍色

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

組合記得勾選觸發內部元件鼠標交互樣式，這樣移入組合就可以觸發背景矩形的懸停樣式。

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

鼠標單擊刪除按鈕時，我們用刪除行的交互，刪除中繼器里當前行的內容。

2）中繼器表格的設置

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

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

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

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

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

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

那這樣上傳列表的內容就做完了。

2. 上傳按鈕組

1）上傳按鈕組所需元件

上傳按鈕如由4部分內容組成，包括按鈕、輸入框、兩個文本標簽。

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

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

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

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

2）上傳按鈕組的交互

①鼠標單擊上傳按鈕組的交互

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

②click文本標簽鼠標單擊時的交互

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

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

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

那接下來我們就要用到slice函數，slice函數可以截取文本內對應的內容，那么結合上面獲得的\最后一次出現的位置了，我們再+1位，從這位起開始截取到最后，就是對應的文件名稱了。

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

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