今天教大家怎么做一個(gè)高保真的上傳圖片、文件的效果。該原型用中繼器做的，所以使用的時(shí)候只需要簡(jiǎn)單填寫表格內(nèi)容即可，也可以當(dāng)做學(xué)習(xí)中繼器交互的案例。如有喜歡該原型或者有什么疑問的都可以在評(píng)論區(qū)留言。

為什么要做這樣的原型呢，系統(tǒng)里面不是可以將文本框設(shè)置為文件的格式然后上傳嗎？

首先系統(tǒng)的文件文本框格式不能自由修改，可能ui和我們自己的demo不搭；其次是演示的時(shí)候，axure打開不了本地文件的，所以沒有很好的交互效果。

那為什么不用js調(diào)用，雖然用js調(diào)用，可以更改上傳按鈕的ui，但是同樣不能打開本地文件，只能設(shè)定一個(gè)交互效果不能，沒有很好的體驗(yàn)。

所以呢，就模擬了高保真上傳界面。為了可以隨心所欲的設(shè)置樣式和交互。

好了，說了這么多開始進(jìn)入正題了。

效果演示

1. js調(diào)用的上傳原型

js的好處就是簡(jiǎn)單，直接調(diào)用，但是上傳的圖片只能默認(rèn)寫死，不能變更。而且axure9好像不支持使用，axure8正常使用。

2. 高保真上傳原型

（1）上傳圖片

正常上傳效果：

上傳格式不是圖片的時(shí)候：

分類查看：

（2）上傳頭像

（3）上傳文件

還有更多交互，例如新建文件夾等，大家可以自己嘗試哦。

使用方法

該原型最重要的就是內(nèi)容中繼器

type：填寫類型文件夾、圖片、視頻、ppt等等，如果控麥的就默認(rèn)其他文件，可以參考之前的填寫，或者自己增加也可以（其實(shí)大部分類型都有了）。

自己增加的時(shí)候需要注意，在每項(xiàng)加載時(shí)復(fù)制下面的事件，類型填你新增的類型，然后設(shè)置圖片導(dǎo)入對(duì)應(yīng)的圖片即可

• name：填寫文件名，如果是圖片的話，右鍵導(dǎo)入圖片即可
• address：地址，例如該文件在“桌面”的“文件夾1”里面，填寫“桌面-文件夾1”
• rank：如果是文件可以不用填，類型是文件夾填1，硬盤填2，為了排序好看一點(diǎn)
• jingyong：不用填寫默認(rèn)為空，只做邏輯處理

制作方法

1. 中部文件中繼器

這個(gè)是最重要的一部分內(nèi)容，中部中繼器里包含圖片，文本，多選框，和透明背景框一個(gè)，如下圖所示擺放透明背景框的作用是移入和選中時(shí)有一個(gè)顏色變化的效果

多選框的話大家可以有系統(tǒng)的多選框，如果覺得樣式不好看的話可以自己制作，具體可以參考我之前的文章建議收藏：Axure交互常用按鈕組

交互事件：

• type：每項(xiàng)加載時(shí)，如果tpye=pdf，設(shè)置圖片=pdf圖片，如果type=視頻，設(shè)置圖片=視頻圖片，如此類推
• name：每項(xiàng)加載時(shí)，設(shè)置文本name=item.name
• address：地址是后面篩選用到的，例如該文件在“桌面”的“文件夾1”里面，填寫“桌面-文件夾1”
• rank：用于排序的，硬盤排在最前填寫2，文件夾填寫1即可。如果是文件就默認(rèn)不用填寫。中繼器默認(rèn)按rank降序排列
• jinyong：其實(shí)利用中繼器記住那個(gè)選中了，jinyong=1，就讓透明背景框變色，如果=0，設(shè)置無。

鼠標(biāo)單擊該組合時(shí)切換選中狀態(tài)，雙擊時(shí)判斷，如果rank=0，應(yīng)該整個(gè)上傳彈窗，就完成上傳了。

如果rank！=0，進(jìn)行篩選，條件是target.item.address=item.address+item.name

2. 左邊欄

如下圖所示利用圖標(biāo)文字和背景框制作

交互也簡(jiǎn)單，點(diǎn)擊組合時(shí)，對(duì)上面中繼器進(jìn)行篩選item.address=文字即可

3. 上面欄

單擊左邊欄或雙擊中繼器內(nèi)組合設(shè)置中間文字=item.address，這里為了好看用replace函數(shù)將-換成→圖標(biāo)。

搜索的話，只需要進(jìn)行模糊篩選中繼器就可以了，如果不知道模糊篩選怎么做的話，可以參考我之前的文章建議收藏：高保真搜索框集合

4. 底部欄

• 文件名：鼠標(biāo)雙擊中繼器內(nèi)組合時(shí)設(shè)置文件名=item.name即可
• 打開：觸發(fā)中繼器中部組合鼠標(biāo)雙擊時(shí)的時(shí)間
• 取消：隱藏整一個(gè)組合
• 自定義文件：一個(gè)篩選方式，如果我們是上傳圖片的話，設(shè)置點(diǎn)擊自定義文件，只顯示tpye=文件夾、硬盤和圖片。點(diǎn)擊所有文件，移除篩選即可。

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

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