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

編輯導(dǎo)語(yǔ)：如何通過(guò) Axure 來(lái)實(shí)現(xiàn)文件上傳效果以及添加后續(xù)交互設(shè)置呢？本文作者通過(guò)自己的學(xué)習(xí)，探索出了如何實(shí)現(xiàn)正常的文件上傳效果，以及如何設(shè)置上傳完的各種其他交互，希望本文對(duì)你有所幫助。

因?yàn)锳xure自帶的文件上傳是通過(guò)設(shè)置輸入框類型為File實(shí)現(xiàn)的，生成預(yù)覽后奇丑無(wú)比，本文通過(guò)一些變通的方法，實(shí)現(xiàn)正常的文件上傳效果——點(diǎn)擊按鈕，選擇文件，開始上傳。

本文使用軟件版本：Axure9?英文版，參考文章：《青銅修煉手冊(cè)：Axure實(shí)現(xiàn)文件上傳效果》。

該文章稍微改改（參見步驟3）在Axure上是可以實(shí)現(xiàn)的對(duì)應(yīng)效果的，但是對(duì)一些原理并沒有進(jìn)行講解，本文結(jié)合js代碼及Chrome調(diào)試窗口，詳細(xì)講解了實(shí)現(xiàn)效果及上傳完后的交互及其原理，方便以后舉一反三，設(shè)置上傳完的各種其他交互。

一、拖入必要的控件并命名

一個(gè)Button（按鈕），一個(gè)Text Filed（輸入框），一個(gè)動(dòng)態(tài)面板Dynamic?Panel（動(dòng)態(tài)面板），動(dòng)態(tài)面板里隨便放點(diǎn)內(nèi)容；每個(gè)控件都命名一下，分別命名為文件上傳按鈕，文件上傳輸入框，正在上傳面板，方便后續(xù)用。

二、設(shè)置輸入框類型并將動(dòng)態(tài)面板設(shè)為隱藏

設(shè)置輸入框類型為File：

三、設(shè)置輸入框交互

設(shè)置輸入框OnLoad事件Open Link（打開連接），Link To External URL（鏈接到url），函數(shù)中輸入：

javascript:

var f=$(“[data-label=’文件上傳輸入框’]”).children()[1];

$(“[data-label=’文件上傳輸入框’]”).change(function(){

$(“[data-label=’正在上傳面板’]”).attr(“style”,”display:block;”);

$(“[data-label=’正在上傳面板’]”).attr(“class”,”ax_default”);

$(“[data-label=’正在上傳面板’]”).css(“visibility”, “visible”);

});

此處和參考文章有點(diǎn)差別，參考文章中是：

var f=$(“[data-label=’文件上傳輸入框’]”).children()[0];

通過(guò)瀏覽器F12調(diào)試，可知input控件索引是1，可能是Axure版本不同導(dǎo)致。

然后將輸入框設(shè)置為隱藏狀態(tài)：

前端大神應(yīng)該可以看出來(lái)，其實(shí)就是一段javascript代碼，這段代碼主要是獲取輸入框控件，命名為f；設(shè)置了輸入框控件的響應(yīng)事件，在響應(yīng)事件中，將動(dòng)態(tài)面板設(shè)為可見。

至于為什么要設(shè)置3個(gè)參數(shù)，可以通過(guò)F12查看前端代碼，Axure設(shè)置動(dòng)態(tài)面板隱藏時(shí)，這3處都是隱藏狀態(tài)：

四、設(shè)置按鈕交互事件，隱藏輸入框

按鈕OnClick事件，打開連接，連接到url，函數(shù)中輸入：

javascript:f.click();

f就是剛剛輸入那個(gè)變量，調(diào)用它的click方法，就可以打開文件上傳對(duì)話框：

五、完成，預(yù)覽

本文由 @小林 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議