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

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

一、效果展示

1、點選上傳按鈕，可以選擇本地的檔案進行上傳。

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

3、滑鼠移入對應檔案，會有一個高亮的效果，並且顯示刪除按鈕，點選刪除按鈕可以在列表中刪除對應的檔案。

二、製作教程

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

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位，從這位起開始擷取到最後，就是對應的檔名稱了。

這樣我們就完成了能自動識別檔案型別的上傳列表原型模板了，後續使用也是很方便，預設已上傳的檔案只需要在中繼器表格裡填寫檔名，即可自動生成互動效果。

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

本文由 @AI產品人 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基於 CC0 協議

該文觀點僅代表作者本人，人人都是產品經理平臺僅提供資訊儲存空間服務。