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

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

一、效果展示

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

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

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

二、制作教程

這個(gè)原型主要分問(wèn)上傳列表和上傳按鈕組兩部分組成。

1. 上傳列表

上傳列表，我們是用中繼器來(lái)制作。

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

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

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

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

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

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

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

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

3）中繼器每項(xiàng)加載時(shí)的交互

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

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

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

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

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

2. 上傳按鈕組

1）上傳按鈕組所需元件

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

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

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

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

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

2）上傳按鈕組的交互

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

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

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

我們用添加行的交互，因?yàn)樯厦嫖覀儗⑽募穆窂皆O(shè)置到text文本標(biāo)簽里面，所以我們可以在里面提取到文件名稱，將他添加到中繼器text列里。這樣中繼器就會(huì)重新加載，根據(jù)text列的內(nèi)容為他選擇對(duì)應(yīng)的的圖標(biāo)并顯示出來(lái)。

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

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

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

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

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