中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：上傳圖片是常見功能之一，但是Axure里沒有上傳圖片的元件，因此，若想畫出高保真的上傳圖片原型，我們則需要另想方法。本篇文章里，作者介紹了利用代碼制作上傳圖片原型模板的操作流程，不妨來看一下，也許會對你有所幫助。

上傳圖片可以說是每個系統(tǒng)必備的功能，包括上傳頭像、發(fā)送圖片、上傳商品圖片……都需要用到上傳圖片的功能。

我們在畫產品原型的時候，也常常需要畫出上傳圖片的效果，但是Axure里面并沒有上傳圖片的元件，導致我們不能畫出高保真的上傳圖片的原型。

所以本期教程主要介紹如何通過代碼制作上傳本地圖片的原型模板，讓我們可以在Axure的演示界面做出上傳本地圖片的高保真效果。

一、制作完成后應具備以下效果

• 可以彈出選擇文件的窗口，可以在窗口內選擇本地文件；
• 選擇圖片后，在原型中顯示所選擇的本地圖片。

原型地址：https://j345ms.axshare.com/#g=1

二、制作思路

首先講一下我們在制作中會遇到的難點。

1）如何打開打開可以選擇本地文件的系統(tǒng)彈窗

這里我們需要利用Axure里面輸入框的系統(tǒng)元件輸入框，將輸入框的輸入類型設置為文本，這樣鼠標點擊輸入框的時候，就可以彈出溫蒂文件的系統(tǒng)彈窗了。

雖然這樣可以彈出系統(tǒng)彈窗，但是由遇到另外一個問題：

2）選擇文件的按鈕太丑，如何轉化為自定義按鈕的形式呢？

這里我們一開始是想用當自定義按鈕鼠標單擊時，用觸發(fā)事件觸發(fā)選擇文件的文本框鼠標單擊時的效果來實現(xiàn)。不過發(fā)現(xiàn)這樣行不通，所以我們需要用JS代碼來觸發(fā)這個按鈕。

3）雖然可以通過文件類型的輸入框獲取文件的名稱，但是如果如何獲取文件的路徑？

我們也是需要通過代碼來獲取文件完整的路徑。

4）最后一個難點的問題，獲取到文件的本地路徑之后，如何顯示在圖片元件內？

我們都知道，Axure在預覽的時候，是不支持打開本地的文件的，例如我們的文件路徑為C:\Users\52207\Pictures\1.png，我們用設置圖片的交互是沒辦法在預覽的界面看到選中的圖片的。

但是如果是這種網絡上的圖片路徑（例如https://image.woshipm.com/wp-files/2021/08/sczrP02GIGclZtj4bSlg.jpg）就可以打開。

因為五福無法讀取到實際路徑，這時候需要用代買轉換一下。

三、制作材料

1. Axure外材料

剛剛提到因為Axure在演示時無法讀取本地本地文件，所以我們需要制作一個用于轉換路徑的js文件。我們新建一個記事本，輸入以下代碼。

輸入完成后保存，并將后綴名改成js，然后將文件放到Axure軟件所在的目錄DefaultSettings\Prototype_Files\resources\scripts。

這是本地化的操作，也可以將將js代碼上傳到服務器，生成以后js結尾的url地址。

2. Axure內材料

• 文本框——文本類型為文件，命名為file；
• 按鈕——命名為button；
• 圖片——命名為pic。

將文本框設置為小尺寸，放置在按鈕的下方，用按鈕擋住文本框。

四、交互設置

1）按鈕載入時，打開鏈接交互，執(zhí)行上面js的交互

javascript: $.ajax({url:”resources/scripts/pic.js”,dataType:”script”})

因為我們前面js文件放置在本地，所以url=resources/scripts/echarts.min.js

如果是放在網上的話，直接替換地址即可。

2）等待0.1秒，用等待事件，間隔開兩端js代碼，這個根據(jù)電腦設置，一般0.1秒即可，如果電腦特別慢的可以適當延長等待時間。

3）再次打開鏈接，寫入代碼

首先是click的代碼，點擊當前文本的元件時，觸發(fā)輸入框鼠標單擊的交互，具體代碼如下。

注：這里this.name==buttom對應的是按鈕的元件命，file對應的是輸入框的元件名稱，元件名稱發(fā)生改變時，代碼也需要改變。

接下來是獲取、轉換本地文件的路徑，并且在圖片元件（命名為pic的元件）中打開對應圖片。

注：這里的file是對應輸入框的元件的名稱，pic對應的是圖片元件的名稱，如果上述元件名稱發(fā)生改變時，代碼也需要改變對應改變。

以上就是通過代碼制作上傳本地圖片原型模板的全部內容了，感興趣的同學們可以動手試試，謝謝您的閱讀。

本文由 @AI產品人 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協(xié)議