本文詳細介紹了如何在Axure中建立一個上傳圖檔清單的原型模闆，包括具體的操作步驟和互動設計，對于需要在産品原型中實作圖檔上傳功能的産品經理和設計師來說，這是一個非常實用的教程。閱讀本文，你将學會如何制作一個互動式的圖檔上傳清單，希望對你有所幫助。

上傳圖檔清單常用于許多不同類型的應用和系統中，包括社交媒體平台、電子商務網站、部落格和内容管理系統、線上相冊和圖像存儲服務、項目管理工具等，發揮着重要作用，幫助使用者管理、組織和展示他們上傳的圖檔，進而豐富内容、提高使用者體驗，并支援各種業務需求。

是以今天作者就教大家怎麼在Axure制作一個上傳圖檔清單的原型模闆，具體效果如下所示：

一、原型效果

1、點選上傳方框，打開顯示本地資源的視窗，裡面可以選擇本地的資源。

2、如果選擇的不是圖檔格式，彈出彈窗提示。

3、如果選擇的是圖檔格式，将圖檔回顯，然後顯示下一個上傳方框。

二、制作教程

1. 材料準備

這裡需要的材料很簡單主要包括一個上傳框的圖檔，一個文本框和一個文本标簽。

圖檔我們命名為vigopic1，文本框命名為vigotext1，文本标簽命名為click1。

圖檔預設選擇上傳框的圖檔。

文本标簽，用于觸發後續互動。

文本框輸入類型選擇輸入框，我們通過js代碼可以調用選擇本地圖檔，選擇圖檔後進行回顯，之前在上傳圖檔那章教程裡面，有詳細講解，大家可以先去學習那章教程，然後再回來學習上傳之後怎麼觸發繼續上傳新的圖檔。

整體擺放如下圖所示，隻顯示圖檔，文本标簽和文本框放置在圖檔底部，用圖檔遮擋着他倆。

如果想做成清單，我們需要總共上傳多少個，就複制幾個，例如朋友圈案例是最多上傳9個，那就複制多8個，總數九個，前面隻有第一個預設顯示，後面的預設隐藏即可，然後擺放整齊就可以了，本示範案例是做了一個最多上傳12張圖檔的案例，如果有需要更多的，也可以按照下面方法自行添加。

對了，因為js代碼是根據元件名來上傳和回顯的，是以檔案名要唯一，前面第一個組合，我們把圖檔命名為vigopic1，文本框命名為vigotext1，文本标簽命名為click1；那第二個組合就要改成圖檔命名為vigopic2，文本框命名為vigotext2，文本标簽命名為click2；那第3個組合就要改成圖檔命名為vigopic3，文本框命名為vigotext3，文本标簽命名為click3……如此類推。

2. 互動制作

在原有的代碼基礎上，我們可以增加一個判斷，就是上傳的是否為圖檔格式，常見的圖檔格式包括png、jpg、jpeg，案例中用的是這三種格式，如果需要增加其他圖檔格式，可以自行添加代碼如：

if(fileType==”image/png”||fileType==”image/jpeg”||fileType==”image/jpg”)

如果上傳不符合格式，我們用 alert代碼，調出系統彈窗提示即可，例如 alert( “請上傳圖檔（格式JPG、JPEG、PNG）!”)；

如果上傳的格式符合，那就回顯圖檔，這裡和之前上傳圖檔不同的是，回顯之後，我們要顯示下個一個上傳框，以第一個上傳框上傳回顯後為例，我們要從代碼回到axure的元件裡面，這裡我們需要借助文本标簽click1，我們在文本标簽滑鼠單擊時，我們用顯示的互動，将第二個組合顯示出來就可以了。

現在剩下的問題就是，上傳回顯完之後，怎麼觸發這個文本标簽滑鼠單擊的事件呢？

我們可以在代碼裡增加一行，用jQuery 事件 – click 方法，模拟點選按鈕（或執行點選按鈕時的操作），我們要選擇Axure裡名為click1的元件，相當于選擇頁面中标有 data-label 屬性值為 ‘click1′ 的元素，是以整行代碼是(“[data-label=’click1’]”).click;選擇頁面中标有 data-label 屬性值為 ‘click1’ 的元素，并模拟使用者對這個元素的點選，點選之後就觸發上面單擊時的互動，顯示第一個組合。

組合2的話也是同一個原理，我們把圖檔命名為vigopic1、文本框命名為vigotext1、文本标簽命名為click1的目的也是為了友善後續修改，在第二個組合裡的，我隻需要代碼和名字裡的’1’改成’2’，然後互動事件顯示組合2改成顯示組合3就可以了，改起來也非常友善。

後續的345678……組合，也是同一個道理。

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

本文由人人都是産品經理作者【AI産品人】，微信公衆号：【Axure高保真原型】，原創/授權釋出于人人都是産品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于 CC0 協定。