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

Axure教程：文件上傳、自動產生列表根據(jù)流行的前端視覺框架，制作了這個文件上傳的元件，重構了交互關系，所以可定制化程度變高。Axure本身是帶一個文件上傳的文本框的，只要在頁面中放置一個文本框，并且把這個文本框的輸入類型變成“文件”，它就自動變成了可以選擇文件上傳的表單元素，但是真的很簡陋，無法適應視覺個性化定制，交互方式也有限?，F(xiàn)在前端視覺框架越來越成熟，很多公司會根據(jù)框架創(chuàng)建自己的視覺規(guī)范，并讓設計師在Axure當中直接制作高保真原型，從而減少設計師與開發(fā)之間的溝通成本。所以我根據(jù)流行的前端視覺框架，制作了這個文件上傳的元件。在開始制作前，你可以看一下效果預覽：https://axhub.im/ax9/e354386a7e0f9a92/#g=1接下來我們一步一步的實現(xiàn)這個功能：第一步：放置元件首先在頁面上放置5個元件：1個文本框，3個矩形，1個中繼器。其中的文本框記得設置輸入類型為“文件”。第二步：設置ID給這幾個元件設定ID，分別是：fileButtonChose、fileButtonClick、fileButtonPath、fileButtonList。圖中藍色的按鈕是主要交互按鈕，默認不需要設置ID。第三步：添加交互動作接下來我們開始給每一個元件添加交互動作1.fileButtonChose，文本框主要腳本代碼寫在了這個元件上，通過Javascript模擬了文件選擇動作，并把文件名推送給過渡元件。選中文本框以后，添加一個“隱藏”交互動作，當隱藏時，打開鏈接到URL，然后把javascript代碼貼進去。代碼在這里，可以直接拷貝粘貼如果你是用的是Axure8，可能會出bug，這時候嘗試修改children()[1]；files[0]；這兩個數(shù)組的序號，原因是Axure不同版本生成的HTML結構有差異，導致javascript對象指針錯誤。javascript:varfileButtonSelect=$("[data-label='[[T]]']").children()[1];$("[data-label='[[T]]']").change(function(){varfileButtonName=fileButtonSelect.files[0].name;$('[]pspan').html(fileButtonName);$("[data-label='fileButtonClick']").click();});2.fileButtonClick，矩形這是一個過渡的元件，因為javascript無法直接操作中繼器，所以使用一個元件來觸發(fā)中繼器的動作。添加交互單擊時使中繼器fileButtonList添加一行數(shù)據(jù)。這里使用了一個局部變量[[LVAR1]]，變量值是fileButtonPath的元件文本3.fileButtonPath，矩形這是一個過渡的元件，因為javascript無法直接生成原生交互可以使用的全局變量，所以使用一個元件文本來緩存文件名。這個元件不需要添加交互。4.點擊上傳，矩形這是可自定義視覺樣式的主觸發(fā)按鈕。“點擊上傳”按鈕添加一個單擊動作，填入代碼javascript:fileButtonSelect.click();并且設定移入移出的交互，切換fileButtonChose文本框的隱藏狀態(tài)。5.fileButtonList，中繼器中繼器的內部元件的結構是這樣的，其中有一個ID為fileName的矩形，作為文件名的展示，另外還有一個刪除按鈕，可以對中繼器的內容列表進行操作。整體來看是這樣：中繼器fileButtonList的數(shù)據(jù)表暫時只做了一個字段PicName，你可以根據(jù)需求增加。制作完中繼器，我們需要添加一個交互動作，作為加載時給內部的fileName做文本展示。內部的刪除按鈕，可以加上這段交互動作到這里，我們基本完成了整個元件的功能制作。創(chuàng)建動態(tài)面板通過創(chuàng)建動態(tài)面板，把不需要顯示的元件隱藏。為了讓元件看起來更美觀，我們可以通過動態(tài)面板的可見區(qū)域的設置完成這個。這是Axure系列的第一篇文章，文筆和表達方式還不成熟，歡迎大家提建議。演示