今天教大家怎麼做一個高保真的上傳圖片、文件的效果。該原型用中繼器做的，所以使用的時候只需要簡單填寫表格內容即可，也可以當做學習中繼器交互的案例。如有喜歡該原型或者有什麼疑問的都可以在評論區留言。
為什麼要做這樣的原型呢，系統裡面不是可以將文本框設置為文件的格式然後上傳嗎？
首先系統的文件文本框格式不能自由修改，可能ui和我們自己的demo不搭；其次是演示的時候，axure打開不了本地文件的，所以沒有很好的交互效果。
那為什麼不用js調用，雖然用js調用，可以更改上傳按鈕的ui，但是同樣不能打開本地文件，只能設定一個交互效果不能，沒有很好的體驗。
所以呢，就模擬了高保真上傳界面。為了可以隨心所欲的設置樣式和交互。
好了，說了這麼多開始進入正題了。
效果演示
1. js調用的上傳原型
js的好處就是簡單，直接調用，但是上傳的圖片只能默認寫死，不能變更。而且axure9好像不支持使用，axure8正常使用。
2. 高保真上傳原型
（1）上傳圖片
正常上傳效果：
上傳格式不是圖片的時候：
分類查看：
（2）上傳頭像
（3）上傳文件
還有更多交互，例如新建文件夾等，大家可以自己嘗試哦。
使用方法
該原型最重要的就是內容中繼器
type：填寫類型文件夾、圖片、視頻、ppt等等，如果控麥的就默認其他文件，可以參考之前的填寫，或者自己增加也可以（其實大部分類型都有了）。
自己增加的時候需要注意，在每項加載時複製下面的事件，類型填你新增的類型，然後設置圖片導入對應的圖片即可
- name：填寫文件名，如果是圖片的話，右鍵導入圖片即可
- address：地址，例如該文件在“桌面”的“文件夾1”裡面，填寫“桌面-文件夾1”
- rank：如果是文件可以不用填，類型是文件夾填1，硬盤填2，為了排序好看一點
- jingyong：不用填寫默認為空，只做邏輯處理
製作方法
1. 中部文件中繼器
這個是最重要的一部分內容，中部中繼器裡包含圖片，文本，多選框，和透明背景框一個，如下圖所示擺放
透明背景框的作用是移入和選中時有一個顏色變化的效果
多選框的話大家可以有系統的多選框，如果覺得樣式不好看的話可以自己製作，具體可以參考我之前的文章建議收藏：Axure交互常用按鈕組
交互事件：
- type：每項加載時，如果tpye=pdf，設置圖片=pdf圖片，如果type=視頻，設置圖片=視頻圖片，如此類推
- name：每項加載時，設置文本name=item.name
- address：地址是後面篩選用到的，例如該文件在“桌面”的“文件夾1”裡面，填寫“桌面-文件夾1”
- rank：用於排序的，硬盤排在最前填寫2，文件夾填寫1即可。如果是文件就默認不用填寫。中繼器默認按rank降序排列
- jinyong：其實利用中繼器記住那個選中了，jinyong=1，就讓透明背景框變色，如果=0，設置無。
鼠標單擊該組合時切換選中狀態，雙擊時判斷，如果rank=0，應該整個上傳彈窗，就完成上傳了。
如果rank！=0，進行篩選，條件是target.item.address=item.address+item.name
2. 左邊欄
如下圖所示利用圖標文字和背景框製作
交互也簡單，點擊組合時，對上面中繼器進行篩選item.address=文字即可
3. 上面欄
單擊左邊欄或雙擊中繼器內組合設置中間文字=item.address，這裡為了好看用replace函數將-換成→圖標。
搜索的話，只需要進行模糊篩選中繼器就可以了，如果不知道模糊篩選怎麼做的話，可以參考我之前的文章建議收藏：高保真搜索框集合
4. 底部欄
- 文件名：鼠標雙擊中繼器內組合時設置文件名=item.name即可
- 打開：觸發中繼器中部組合鼠標雙擊時的時間
- 取消：隱藏整一個組合
- 自定義文件：一個篩選方式，如果我們是上傳圖片的話，設置點擊自定義文件，只顯示tpye=文件夾、硬盤和圖片。點擊所有文件，移除篩選即可。
題圖來自 Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
