起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：如何實(shí)現(xiàn)圖片上傳 – 自動(dòng)預(yù)覽
編輯導(dǎo)語：很多APP都有圖片上傳然后自動(dòng)預(yù)覽功能，那么如何用Axure教程實(shí)現(xiàn)這個(gè)功能呢？本文作者通過實(shí)際操作，為我們展示了整個(gè)流程，并且總結(jié)了四個(gè)步驟，希望看后能夠?qū)δ阌兴鶐椭?/p>
上一篇文章講述了定制化上傳元件的視覺效果，其實(shí)在制作過程中，我曾經(jīng)碰到過一個(gè)問題，那就是“試圖讀取文件路徑時(shí)，發(fā)現(xiàn)文件路徑被替換為C:/fakepath/****.jpg”。
——這是由于瀏覽器的安全機(jī)制，input file的路徑時(shí)被fakepath代替，隱藏了真實(shí)物理路徑。
Axure通常是用來做原型演示的，所以離線本地運(yùn)行的情況比較多。
當(dāng)我們想要在HTML里面嘗試要做本地圖片預(yù)覽，遠(yuǎn)古時(shí)期的做法是用類似“href=”file:///C:/Users/***.jpg””直接加載來解決，但是現(xiàn)在行不通了，需要一個(gè)新的辦法，所以今天我們制作一個(gè)模擬圖片上傳的原型。
在開始制作前，你可以看一下效果預(yù)覽：https://k4a51h.axshare.com/#id=cpnfyk&p=upload
一、第一步：放置元件
首先在頁(yè)面上放置3個(gè)元件：1個(gè)文本框，2個(gè)矩形。
文本框記得設(shè)置輸入類型為“文件”：
中間大的矩形選張圖片作為填充背景：
二、第二步：設(shè)置ID
給這3個(gè)元件設(shè)定ID，分別是：fileChose、changeIMG、fileTypeField。
三、第三步：添加交互動(dòng)作
1. fileChose，文本框
主要腳本代碼寫在了這個(gè)元件上，通過Javascript模擬了文件選擇動(dòng)作。選中文本框以后，添加一個(gè)“隱藏”交互動(dòng)作，當(dāng)隱藏時(shí)，打開鏈接到URL，然后把javascript代碼貼進(jìn)去。
上一個(gè)教程的時(shí)候也有朋友問我，這里執(zhí)行JS腳本為什么用隱藏的交互，而不是直接“載入時(shí)”。
主要是考慮復(fù)制元件使用時(shí)，JS會(huì)有沖突，所以通過主按鈕做了一個(gè)刷新，具體的我在下一篇文章做擴(kuò)展應(yīng)用時(shí)會(huì)用到，你也可以暫時(shí)做成“載入時(shí)”交互。
這里加了一個(gè)在文件加載前識(shí)別常規(guī)圖片格式的判斷，如果不是PNG等，會(huì)停止加載并彈警告。
大家最喜歡的拷貝代碼環(huán)節(jié)：
*前面提到瀏覽器安全限制，無法直接訪問本地文件，所以這里是通過以下這段代碼解決的：
原理就是將文件讀取為 DataURL，一段以 data: 開頭的字符串。DataURL是一種將圖像與 html 等格式的小文件直接嵌入文檔的方案，這個(gè)玩法估計(jì)前端開發(fā)的同學(xué)會(huì)比較熟。
2. changeIMG，矩形
記得確認(rèn)設(shè)置了矩形的填充為圖片。添加一個(gè)單擊動(dòng)作，填入代碼：
同時(shí)設(shè)定移入移出的交互，切換fileChose文本框的隱藏狀態(tài)，以便根據(jù)交互動(dòng)作重載JS腳本。
3. fileTypeField，矩形
這個(gè)是用來展示上傳圖片的格式的文本，非必要，沒有交互腳本。
四、第四步：創(chuàng)建動(dòng)態(tài)面板
通過創(chuàng)建動(dòng)態(tài)面板，把不需要顯示的元件隱藏。
為了讓元件看起來更美觀，我們可以通過動(dòng)態(tài)面板的可見區(qū)域的設(shè)置完成這個(gè)，把文本框拖到范圍以外，并且記得把動(dòng)態(tài)面板的“自適應(yīng)內(nèi)容”的勾去掉，這樣文本框就看不到了。
這是Axure系列的又一篇文章，這幾個(gè)組件是9月份做的，本來打算國(guó)慶期間把心得寫完的，結(jié)果沉迷3D打印，就拖延了……
請(qǐng)關(guān)注我，近期會(huì)陸續(xù)推送一系列的Axure個(gè)性化定制文章，目的是方便大家根據(jù)流行的前端框架制定交互與視覺規(guī)范，并與技術(shù)可實(shí)現(xiàn)的效果一致的。等系列文章寫完，會(huì)提供整套的源文件下載。
作者：ELement；公眾號(hào)：ElementChen
本文由 @ELement 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
你好有源文件嗎