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

編輯導語：上傳文件是用戶的常用操作，也是系統的必備功能之一，那么如何利用中繼器做出一個高保真的上傳列表？本篇文章里，作者就如何在Axure做出上傳文件的高保真效果進行了總結，一起來看一下。

上傳列表可以說是系統必備的頁面，我們可以將對應的文件上傳到系統，上傳的狀態包括正在上傳、上傳成功、上傳失敗的狀態都可以在上傳列表中查看和處理。

所以本期教程主要介紹如何通過中繼器做一個高保真的上傳列表，讓我們可以在Axure的演示界面做出上傳本地文件的高保真效果。

一、制作完成后應具備以下效果

1. 可以真實選擇電腦里的本地文件；
2. 選擇本地文件后，獲取已選中文件的名稱信息；
3. 模擬正在上傳的等待效果；
4. 可以刪除已上傳的文件；
5. 上傳失敗后，點擊上傳失敗文字，可以重新上傳。

二、制作材料準備

1. 中繼器內材料

這個原型主要用中繼器制作，所以我們需要新建一個中繼器，中繼器內材料包括：

• 文件圖片——文件圖標；
• 藍色矩形——用于制作等待效果的橫條，圓角設置為最大值；
• 淺藍色矩形——用于loading效果的背景橫條，圓角設置為最大值；
• 文件名稱——顯示文件名，用文本標簽制作即可；
• 上傳狀態——默認藍色文字，默認內容為正在上傳；
• 刪除按鈕——刪除當前文件的圖標按鈕；
• 背景矩形——白色矩形，外部陰影為淺藍色；
• 垂直線——用于分隔和美化原型。

如下所示擺放：

中繼器表格設置，表格內共三列：

1. no——用于排序使用，按12345678順序填寫即可；
2. text——對應文本名稱的文本；
3. state——上傳狀態包括上傳成功、上傳失敗和正在上傳。

2. 上傳按鈕組合

因為要實現本地上傳文件、記錄文件路徑、獲取文件名稱、中繼器添加行的效果，所以上傳按鈕不僅僅是一個按鈕，它由以下4個部分組合。

1）藍色按鈕——命名為upload，至于頂層，在按鈕組里只看到該元件，樣式可以設置美觀。

2）輸入框——命名為file，這里我們需要利用Axure里面輸入框的系統元件輸入框，將輸入框的輸入類型設置為文本，這樣鼠標點擊輸入框的時候，就可以彈出文件的系統彈窗了。我們把這個輸入框縮小，用藍色按鈕遮擋。

3）文本標簽——命名為text，用于記錄選擇文件的路徑，默認隱藏，可直接用藍色按鈕遮擋。

4）文本標簽——命名為click，用于上傳文件后觸發中繼器添加行事件。

三、交互設置

1. 中繼器載入時交互

添加排序——對中繼器按鈕no列的內容按升序的方式排列。這樣做是為了后續添加新文件的時候，新文件可以排在首行的位置。

2. 中繼器每項加載時交互

設置文本——設置文件名稱元件的文本值等于Item.text，即中繼器內text列的值。

然后我們需要分三種狀態來設置，不同交互。

1）如果state列的值為正在上傳

設置文本——設置上傳狀態元件的文本值等于Item.text，即中繼器內text列的值，這里我們用富文本的形式，這樣就可以選擇設置文本的顏色為藍色。

設置尺寸——設置藍色矩形（上傳橫條）的尺寸，高于它原來的高度，寬等于1。因為是正在上傳，所以將藍色橫條設置為最小準備制作loading的效果。

設置尺寸——再次設置藍色矩形（loading橫條）的尺寸，高于它原來的高度，寬等于灰色矩形（背景橫條）的寬度，這里注意我們需要加一個動畫時間案例中為2000ms，這樣就實現了上傳loading的效果。

等待——這里我們需要等待上面藍色矩形動畫時間結束，一般等待比它的時間稍長一點，案例中我們設置等待2500ms。

更新行——更新當前行state列的文字，更新為上傳成功。

這樣就順利完成上傳loading的效果了。

2）如果state列的值為上傳成功

設置文本——設置上傳狀態元件的文本值等于Item.text，即中繼器內text列的值，這里我們用富文本的形式，這樣就可以選擇設置文本的顏色為綠色。

設置尺寸——設置藍色矩形（loading橫條）的尺寸，高于它原來的高度，寬等于灰色矩形（背景橫條）的寬度，這里注意不需要加動畫時間，因為動畫在正在上傳的時候已經完成了，這里主要是默認的列表需要這樣設置。

3）如果state列的值為上傳失敗

設置文本——設置上傳狀態元件的文本值等于Item.text，即中繼器內text列的值，這里我們用富文本的形式，這樣就可以選擇設置文本的顏色為紅色。

3. 上傳狀態文字鼠標單擊時

上傳狀態分為上傳成功、正在上傳和上傳失敗，前兩者不需要處理，如果上傳失敗，我們想實現點擊文字就重新上傳的效果。

更新行——更新當前行，state列的值，更新為正在上傳。因為前面我們在中繼器每項加載時寫了正在上傳的事件，所以更新行之后就會實現重新上傳的效果。

4. 關閉按鈕鼠標點擊時

刪除行——刪除當前行的文件。

5. upload按鈕鼠標單擊時事件

這部分內容涉及一些js的代碼，如果沒有相關基礎的話，可能理解起來會有一定的難度，下面我簡單講解一下思路。

首先是鼠標單擊這個按鈕的時候，我們click的代碼觸發file元件點擊，這樣相當于我們在點擊藍色上傳按鈕的時候，同時點擊了file的元件，這樣就可以彈出本地文件選擇的彈窗。

選擇本地文件后，我們要執行兩端的代碼：

1. 將選擇的文件路徑名設置到text的元件里；
2. 再次用click的代碼，觸發原型里click文本標簽點擊的事件。

后續我們會在click文本標簽內添加交互，將已選擇的文件名添加到中繼器內。

6. click元件鼠標單擊時事件

上面說到選擇文件后會觸發該元件鼠標單擊時，那在鼠標單擊時我們要執行一下交互。

1）標記行——標記所有行。

2）更新行——更新已標記的行，即更新所有行，更新no列，將他們的值改為TargetItem.no+1。

這里的意思是將他們的no序號改成他們原來的值+1，這樣原來是12345678的，就會變成23456789。這樣做的目的就是后續我們新增行的時候，可以將最新的一行的no設為1，因為前面我們在中繼器載入時設置了排序按照no的升序，所以新上傳的文件就能排在第一行的位置。

3）添加行——更新no列的值為1，state列的值為正在上傳，text列的值為LVAR1.slice((LVAR1.lastIndexOf(‘\\’))+1。

這里需要展開說明一下，因為我們選擇文件以后，在text元件上獲取到的是文件的路徑，例如：C:\fakepath\微信截圖_20211014105011.png，所以我們還要對text元件進行加工，LVAR1對應的就是text元件。

通過觀察，我們可以發現，文件問就是最后一個\符號后面的內容，所以我們可以用lastIndexOf函數找到最后一個\符號所在的位置，然后用slice從該位置+1起到最后的文本，這樣就取出了文件名稱。

這樣我們就完成了整個元件了，將它組合在一起，以后就可以直接復制或者從元件庫用拖出來使用了，是不是非常好用呢？

那以上就是高保真上傳列表的制作方法了，感興趣的同學們可以動手試試，謝謝您的閱讀。

本文由 @AI產品人 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議