Axure教程:文件上傳、自動產生列表

10 評論 7278 瀏覽 42 收藏 8 分鐘

編輯導讀:文件上傳是很多網站常見的一個基礎功能,本文跟大家分享,如何用Axure完成文件上傳并自動產生列表效果,作者從預覽圖,到所需原件,再到操作步驟都一一展開了分析,并對過程中需要注意的問題進行了介紹,希望對你有所啟發。

根據流行的前端視覺框架,制作了這個文件上傳的元件,重構了交互關系,所以可定制化程度變高。

Axure本身是帶一個文件上傳的文本框的,只要在頁面中放置一個文本框,并且把這個文本框的輸入類型變成“文件”,它就自動變成了可以選擇文件上傳的表單元素,但是真的很簡陋,無法適應視覺個性化定制,交互方式也有限。

現在前端視覺框架越來越成熟,很多公司會根據框架創建自己的視覺規范,并讓設計師在Axure當中直接制作高保真原型,從而減少設計師與開發之間的溝通成本。所以我根據流行的前端視覺框架,制作了這個文件上傳的元件。

在開始制作前,你可以看一下效果預覽:https://axhub.im/ax9/e354386a7e0f9a92/#g=1

接下來我們一步一步的實現這個功能:

第一步:放置元件

首先在頁面上放置5個元件:1個文本框,3個矩形,1個中繼器。

其中的文本框記得設置輸入類型為“文件”。

第二步:設置ID

給這幾個元件設定ID,分別是:fileButtonChose、fileButtonClick、fileButtonPath、fileButtonList。

圖中藍色的按鈕是主要交互按鈕,默認不需要設置ID。

第三步:添加交互動作

接下來我們開始給每一個元件添加交互動作

1. fileButtonChose ,文本框

主要腳本代碼寫在了這個元件上,通過Javascript模擬了文件選擇動作,并把文件名推送給過渡元件。選中文本框以后,添加一個“隱藏”交互動作,當隱藏時,打開鏈接到URL,然后把javascript代碼貼進去。

代碼在這里,可以直接拷貝粘貼

如果你是用的是Axure8,可能會出bug,這時候嘗試修改children()[1];files[0];這兩個數組的序號,原因是Axure不同版本生成的HTML結構有差異,導致javascript對象指針錯誤。

javascript:
var fileButtonSelect=$("[data-label='[[This.name]]']").children()[1];
 $("[data-label='[[This.name]]']").change(
  function(){
    var fileButtonName=fileButtonSelect.files[0].name;
    $('[]pspan').html(fileButtonName);
    $("[data-label='fileButtonClick']").click();
  });

2. fileButtonClick,矩形

這是一個過渡的元件,因為javascript無法直接操作中繼器,所以使用一個元件來觸發中繼器的動作。

添加交互單擊時使 中繼器fileButtonList添加一行數據。

這里使用了一個局部變量[[LVAR1]],變量值是fileButtonPath的元件文本

3. fileButtonPath,矩形

這是一個過渡的元件,因為javascript無法直接生成原生交互可以使用的全局變量,所以使用一個元件文本來緩存文件名。

這個元件不需要添加交互。

4. 點擊上傳,矩形

這是可自定義視覺樣式的主觸發按鈕。

“點擊上傳”按鈕添加一個單擊動作,填入代碼

javascript:fileButtonSelect.click();

并且設定移入移出的交互,切換fileButtonChose文本框的隱藏狀態。

5. fileButtonList,中繼器

中繼器的內部元件的結構是這樣的,其中有一個ID為fileName的矩形,作為文件名的展示,另外還有一個刪除按鈕,可以對中繼器的內容列表進行操作。

整體來看是這樣:

中繼器fileButtonList的數據表暫時只做了一個字段PicName,你可以根據需求增加。

制作完中繼器,我們需要添加一個交互動作,作為加載時給內部的fileName做文本展示。

內部的刪除按鈕,可以加上這段交互動作

到這里,我們基本完成了整個元件的功能制作。

創建動態面板

通過創建動態面板,把不需要顯示的元件隱藏。

為了讓元件看起來更美觀,我們可以通過動態面板的可見區域的設置完成這個。

這是Axure系列的第一篇文章,文筆和表達方式還不成熟,歡迎大家提建議。

演示地址中還有一個圖片上傳的功能,會在下一篇文章介紹。

請關注我,近期會陸續推送一系列的Axure個性化定制文章,目的是方便大家根據流行的前端框架制定一套與技術效果一致的交互規范與視覺規范。

 

作者:ELement;公眾號:ElementChen

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

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 按照教程做倒是做出來了,但是中繼器fileButtonList沒有將文件名稱帶過來,而且點擊上傳時,每次都按照1、2、3、4、5…這樣順序在中繼器里添加多行,這是怎么情況呢?
    Axure版本9

    回復
    1. 我還是 (;′??Д??`)

      回復
    2. 我也帶不出來

      回復
  2. 老師,我做出來中繼器沒有自動添加行呢,要點擊fileButtonClick才能添加行,而且新增行是空值,這個怎么調整?代碼也沒有拼寫錯誤

    回復
  3. 1、按照教程反復嘗試制作多次,始終無果,鼠標點擊上傳按鈕無反應,移出時候,所有元件全部消失,左上角提示 [object Object]
    2、另外按F12查看,點擊按鈕時,提示:Uncaught ReferenceError: fileButtonSelect is not defined
    javascript:fileButtonSelect.click();:1
    3、本人對JS不太了解,所以也看不太懂,到底是哪里出了問題。

    回復
    1. 大佬,找到原因了嗎。。。

      回復
    2. 對js不是很懂,所以沒找到原因,聯系不到作者,按照教程反復多次制作,都沒有實現。

      回復
  4. 老師,為什么我做出來中繼器沒有自動添加行呢,要點擊fileButtonClick才能添加行,而且新增行是空值

    回復
    1. $(“[data-label=’fileButtonClick’]”).click();

      您看一下fileButtonChose當中的這段代碼是不是正確,我最近發現我的輸入會自己把引號變成全角的,看看是不是這個問題。

      回復
    2. 老師,我這個文件名字帶不出來,怎么回事

      回復