axure商城

Axure文件上傳效果及添加后續交互設置

因為Axure自帶的文件上傳是通過設置輸入框類型為File實現的,生成預覽后奇丑無比,本文通過一些變通的方法,實現正常的文件上傳效果——點擊按鈕,選擇文件,開始上傳。

本文使用軟件版本:Axure9 英文版

參考文章

https://blog.csdn.net/qq_27884377/article/details/88718048

該文章稍微改改(參見步驟3)在Axure上是可以實現的對應效果的,但是對一些原理并沒有進行講解,本文結合js代碼及Chrome調試窗口,詳細講解了實現效果及上傳完后的交互及其原理,方便以后舉一反三,設置上傳完的各種其他交互。

步驟

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

一個Button(按鈕),一個Text Filed(輸入框),一個動態面板Dynamic Panel(動態面板),動態面板里隨便放點內容;每個控件都命名一下,分別命名為文件上傳按鈕文件上傳輸入框正在上傳面板,方便后續用

2、設置輸入框類型并將動態面板設為隱藏

設置輸入框類型為File

3、設置輸入框交互

設置輸入框OnLoad事件Open Link(打開連接),Link To External URL(鏈接到url),函數中輸入

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調試,可知input控件索引是1,可能是Axure版本不同導致。

然后將輸入框設置為隱藏狀態

前端大神應該可以看出來,其實就是一段javascript代碼,這段代碼主要是獲取輸入框控件,命名為f;設置了輸入框控件的響應事件,在響應事件中,將動態面板設為可見。至于為什么要設置3個參數,可以通過F12查看前端代碼,Axure設置動態面板隱藏時,這3處都是隱藏狀態

4、設置按鈕交互事件,隱藏輸入框

按鈕OnClick事件,打開連接,連接到url,函數中輸入

javascript:f.click();

f就是剛剛輸入那個變量,調用它的click方法,就可以打開文件上傳對話框

5、完成,預覽

給TA買糖
共{{data.count}}人
人已贊賞
高級教程

axure實現數字輸入框效果

2021-3-17 11:21:37

高級教程

Axure教程——用中繼器做穿梭框

2021-4-8 17:51:18

axure商城
4 條回復 A文章作者 M管理員
  1. 茅嘉懿他老子

    但是這個有個問題,就是會自動生成一個選擇文件的選擇框, 我希望這個選擇框是我自定義的 而不是系統生成的 。這個我還沒找出怎么解決

  2. 茅嘉懿他老子

    ??我原本一直不行,看了你的文檔去試了下。發現其實根本沒調JS,你給個文本框,然后把交互下的輸入類型改為文件,運行就可以了。

  3. 152****6918

    超級超級不錯

  4. 遺忘極地

    666?

?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo