因?yàn)锳xure自帶的文件上傳是通過設(shè)置輸入框類型為File實(shí)現(xiàn)的,生成預(yù)覽后奇丑無比,本文通過一些變通的方法,實(shí)現(xiàn)正常的文件上傳效果——點(diǎn)擊按鈕,選擇文件,開始上傳。
本文使用軟件版本:Axure9 英文版
參考文章
https://blog.csdn.net/qq_27884377/article/details/88718048
該文章稍微改改(參見步驟3)在Axure上是可以實(shí)現(xiàn)的對(duì)應(yīng)效果的,但是對(duì)一些原理并沒有進(jìn)行講解,本文結(jié)合js代碼及Chrome調(diào)試窗口,詳細(xì)講解了實(shí)現(xiàn)效果及上傳完后的交互及其原理,方便以后舉一反三,設(shè)置上傳完的各種其他交互。
步驟
1、拖入必要的控件并命名
一個(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ù)用
2、設(shè)置輸入框類型并將動(dòng)態(tài)面板設(shè)為隱藏
設(shè)置輸入框類型為File
3、設(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];
通過瀏覽器F12調(diào)試,可知input控件索引是1,可能是Axure版本不同導(dǎo)致。
然后將輸入框設(shè)置為隱藏狀態(tài)
前端大神應(yīng)該可以看出來,其實(shí)就是一段javascript代碼,這段代碼主要是獲取輸入框控件,命名為f;設(shè)置了輸入框控件的響應(yīng)事件,在響應(yīng)事件中,將動(dòng)態(tài)面板設(shè)為可見。至于為什么要設(shè)置3個(gè)參數(shù),可以通過F12查看前端代碼,Axure設(shè)置動(dòng)態(tài)面板隱藏時(shí),這3處都是隱藏狀態(tài)
4、設(shè)置按鈕交互事件,隱藏輸入框
按鈕OnClick事件,打開連接,連接到url,函數(shù)中輸入
javascript:f.click();
f就是剛剛輸入那個(gè)變量,調(diào)用它的click方法,就可以打開文件上傳對(duì)話框
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。