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