国产a一级毛片爽爽影院_欧美日韩亚洲中字二区在线播放_国产在线每日都有更新_日韩中文字幕tv在线看_日韩美女婬乱大片A级网站_韩国无遮免费羞羞漫画_久久亚洲精品无码播放偷妻_国产成人777爽视频_色噜噜狠狠成人中文综合18_国产精品免费高清在线观看

編輯導語：很多APP都有圖片上傳然后自動預覽功能，那么如何用Axure教程實現這個功能呢？本文作者通過實際操作，為我們展示了整個流程，并且總結了四個步驟，希望看后能夠對你有所幫助。

上一篇文章講述了定制化上傳元件的視覺效果，其實在制作過程中，我曾經碰到過一個問題，那就是“試圖讀取文件路徑時，發(fā)現文件路徑被替換為C:/fakepath/****.jpg”。

——這是由于瀏覽器的安全機制，input file的路徑時被fakepath代替，隱藏了真實物理路徑。

Axure通常是用來做原型演示的，所以離線本地運行的情況比較多。

當我們想要在HTML里面嘗試要做本地圖片預覽，遠古時期的做法是用類似“href=”file:///C:/Users/***.jpg””直接加載來解決，但是現在行不通了，需要一個新的辦法，所以今天我們制作一個模擬圖片上傳的原型。

在開始制作前，你可以看一下效果預覽：https://k4a51h.axshare.com/#id=cpnfyk&p=upload

一、第一步：放置元件

首先在頁面上放置3個元件：1個文本框，2個矩形。

文本框記得設置輸入類型為“文件”：

中間大的矩形選張圖片作為填充背景：

二、第二步：設置ID

給這3個元件設定ID，分別是：fileChose、changeIMG、fileTypeField。

三、第三步：添加交互動作

1. fileChose，文本框

主要腳本代碼寫在了這個元件上，通過Javascript模擬了文件選擇動作。選中文本框以后，添加一個“隱藏”交互動作，當隱藏時，打開鏈接到URL，然后把javascript代碼貼進去。

上一個教程的時候也有朋友問我，這里執(zhí)行JS腳本為什么用隱藏的交互，而不是直接“載入時”。

主要是考慮復制元件使用時，JS會有沖突，所以通過主按鈕做了一個刷新，具體的我在下一篇文章做擴展應用時會用到，你也可以暫時做成“載入時”交互。

這里加了一個在文件加載前識別常規(guī)圖片格式的判斷，如果不是PNG等，會停止加載并彈警告。

大家最喜歡的拷貝代碼環(huán)節(jié)：

*前面提到瀏覽器安全限制，無法直接訪問本地文件，所以這里是通過以下這段代碼解決的：

原理就是將文件讀取為 DataURL，一段以 data: 開頭的字符串。DataURL是一種將圖像與 html 等格式的小文件直接嵌入文檔的方案，這個玩法估計前端開發(fā)的同學會比較熟。

2. changeIMG，矩形

記得確認設置了矩形的填充為圖片。添加一個單擊動作，填入代碼：

同時設定移入移出的交互，切換fileChose文本框的隱藏狀態(tài)，以便根據交互動作重載JS腳本。

3. fileTypeField，矩形

這個是用來展示上傳圖片的格式的文本，非必要，沒有交互腳本。

四、第四步：創(chuàng)建動態(tài)面板

通過創(chuàng)建動態(tài)面板，把不需要顯示的元件隱藏。

為了讓元件看起來更美觀，我們可以通過動態(tài)面板的可見區(qū)域的設置完成這個，把文本框拖到范圍以外，并且記得把動態(tài)面板的“自適應內容”的勾去掉，這樣文本框就看不到了。

這是Axure系列的又一篇文章，這幾個組件是9月份做的，本來打算國慶期間把心得寫完的，結果沉迷3D打印，就拖延了……

請關注我，近期會陸續(xù)推送一系列的Axure個性化定制文章，目的是方便大家根據流行的前端框架制定交互與視覺規(guī)范，并與技術可實現的效果一致的。等系列文章寫完，會提供整套的源文件下載。

作者：ELement；公眾號：ElementChen

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

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