Axure圖片上傳原型設計方法步驟:
壹、第壹步:放置組件首先在頁面上放置三個組件:1個文本框和2個矩形。
記住在文本框中設置輸入類型為“文件”:
選擇壹張圖片作為中間大矩形的填充背景:
二、第二步:為這三個組件設置ID，即:fileChose、changeIMG、fileTypeField。
3.第三步:添加交互動作1 . file choose .文本框的主腳本代碼寫在這個組件上，用Javascript模擬文件選擇動作。選擇文本框後，添加壹個“隱藏”的交互。隱藏後，打開URL的鏈接，然後將javascript代碼粘貼到其中。
上壹個教程也有朋友問我為什麽在這裏用隱藏交互而不是“加載時間”來執行JS腳本。
主要是因為JS在復制組件的時候會有沖突，所以我通過main按鈕做了壹個刷新，我會在下壹篇文章中用到這個按鈕來擴展應用，妳也可以臨時做壹個“加載時”的交互。
這裏，添加了壹個判斷來在加載文件之前識別正常的圖像格式。如果不是PNG，會停止加載並播放警告。
大家最喜歡的文案代碼鏈接:
*前面提到瀏覽器的安全限制，無法直接訪問本地文件，所以這裏通過下面的代碼來解決:
原理是將文件讀取為DataURL，壹個以data:開頭的字符串。DataURL是壹種將圖像和html等格式的小文件直接嵌入文檔的方案。這個玩法估計正在前端開發的同學都不陌生。
2.changeIMG，記得確認矩形是用圖片填充的。添加壹個點擊動作並填寫代碼:
同時設置移入移出的交互，切換fileChose文本框的隱藏狀態，以便根據交互重載JS腳本。
3.fileTypeField，rectangle這是用來表示上傳圖片格式的文字，沒有必要，也沒有交互腳本。
四、第四步:創建動態面板通過創建動態面板，將不需要顯示的組件隱藏起來。
為了讓組件看起來更漂亮，我們可以通過設置動態面板的可見區域，將文本框拖出該範圍來實現，同時記得檢查動態面板的“自適應內容”，讓文本框看不到。
以上是關於“如何設計Axure圖片上傳原型？”我已經分享了所有精彩的內容，希望妳能從中有所收獲！如果妳覺得壹篇文章不夠過癮，那麽不要錯過Axure相關文章！總之，學習道路和單壹的知識很難實現全面的自我發展！如果妳想完全精通壹門技能，那麽妳必須全面學習！加油，全面學習Axure，全面獲取知識點，快速有效推進自主原型設計~