中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

如何在Axure制作一個上傳圖片列表的原型模板？這篇文章里，作者分享了詳細的教程和步驟，一起來看看吧。

上傳圖片列表常用于許多不同類型的應用和系統(tǒng)中，包括社交媒體平臺、電子商務網(wǎng)站、博客和內容管理系統(tǒng)、在線相冊和圖像存儲服務、項目管理工具等，發(fā)揮著重要作用，幫助用戶管理、組織和展示他們上傳的圖片，從而豐富內容、提高用戶體驗，并支持各種業(yè)務需求。

所以今天作者就教大家怎么在Axure制作一個上傳圖片列表的原型模板，具體效果如下所示：

一、效果展示

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

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

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

原型地址：https://cspfgk.axshare.com/#g=1&p=上傳圖片（列表效果2）

二、制作教程

1. 材料準備

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

圖片我們命名為vigopic1，文本框命名為vigotext1，文本標簽命名為click1。

圖片默認選擇上傳框的圖片。

文本標簽，用于觸發(fā)后續(xù)交互。

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

整體擺放如下圖所示，只顯示圖片，文本標簽和文本框放置在圖片底部，用圖片遮擋著他倆。

如果想做成列表，我們需要總共上傳多少個，就復制幾個，例如朋友圈案例是最多上傳9個，那就復制多8個，總數(shù)九個，前面只有第一個默認顯示，后面的默認隱藏即可，然后擺放整齊就可以了，本演示案例是做了一個最多上傳12張圖片的案例，如果有需要更多的，也可以按照下面方法自行添加。

對了，因為js代碼是根據(jù)元件名來上傳和回顯的，所以文件名要唯一，前面第一個組合，我們把圖片命名為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代碼，調出系統(tǒng)彈窗提示即可，例如 alert( “請上傳圖片（格式JPG、JPEG、PNG）!”)；

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

現(xiàn)在剩下的問題就是，上傳回顯完之后，怎么觸發(fā)這個文本標簽鼠標單擊的事件呢？

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

組合2的話也是同一個原理，我們把圖片命名為vigopic1、文本框命名為vigotext1、文本標簽命名為click1的目的也是為了方便后續(xù)修改，在第二個組合里的，我只需要代碼和名字里的’1’改成’2’，然后交互事件顯示組合2改成顯示組合3就可以了，改起來也非常方便。

后續(xù)的345678……組合，也是同一個道理。

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