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