Axure教程：如何實現(xiàn)圖片上傳 – 自動預(yù)覽

Axure教程：如何實現(xiàn)圖片上傳–自動預(yù)覽上一篇文章講述了定制化上傳元件的視覺效果，其實在制作過程中，我曾經(jīng)碰到過一個問題，那就是“試圖讀取文件路徑時，發(fā)現(xiàn)文件路徑被替換為C:/fakepath/****.jpg”?！@是由于瀏覽器的安全機(jī)制，inputfile的路徑時被fakepath代替，隱藏了真實物理路徑。Axure通常是用來做原型演示的，所以離線本地運行的情況比較多。當(dāng)我們想要在HTML里面嘗試要做本地圖片預(yù)覽，遠(yuǎn)古時期的做法是用類似“href=”file:///C:/Users/***.jpg””直接加載來解決，但是現(xiàn)在行不通了，需要一個新的辦法，所以今天我們制作一個模擬圖片上傳的原型。在開始制作前，你可以看一下效果預(yù)覽：/#id=cpnfyk&p=upload一、第一步：放置元件首先在頁面上放置3個元件：1個文本框，2個矩形。文本框記得設(shè)置輸入類型為“文件”：中間大的矩形選張圖片作為填充背景：二、第二步：設(shè)置ID給這3個元件設(shè)定ID，分別是：fileChose、changeIMG、fileTypeField。三、第三步：添加交互動作1.fileChose，文本框主要腳本代碼寫在了這個元件上，通過Javascript模擬了文件選擇動作。選中文本框以后，添加一個“隱藏”交互動作，當(dāng)隱藏時，打開鏈接到URL，然后把javascript代碼貼進(jìn)去。上一個教程的時候也有朋友問我，這里執(zhí)行JS腳本為什么用隱藏的交互，而不是直接“載入時”。主要是考慮復(fù)制元件使用時，JS會有沖突，所以通過主按鈕做了一個刷新，具體的我在下一篇文章做擴(kuò)展應(yīng)用時會用到，你也可以暫時做成“載入時”交互。這里加了一個在文件加載前識別常規(guī)圖片格式的判斷，如果不是PNG等，會停止加載并彈警告。大家最喜歡的拷貝代碼環(huán)節(jié)：*前面提到瀏覽器安全限制，無法直接訪問本地文件，所以這里是通過以下這段代碼解決的：原理就是將文件讀取為DataURL，一段以data:開頭的字符串。DataURL是一種將圖像與html等格式的小文件直接嵌入文檔的方案，這個玩法估計前端開發(fā)的同學(xué)會比較熟。2.changeIMG，矩形記得確認(rèn)設(shè)置了矩形的填充為圖片。添加一個單擊動作，填入代碼：同時設(shè)定移入移出的交互，切換fileChose文本框的隱藏狀態(tài)，以便根據(jù)交互動作重載JS腳本。3.fileTypeField，矩形這個是用來展示上傳圖片的格式的文本，非必要，沒有交互腳本。四、第四步：創(chuàng)建動態(tài)面板通過創(chuàng)建動態(tài)面板，把不需要顯示的元件隱藏。為了讓元件看起來更美觀，我們可以通過動態(tài)面板的可見區(qū)域的設(shè)置完成這個，把文本框拖到范圍以外，并且記得把動態(tài)面板的“自適應(yīng)內(nèi)容”的勾去掉，這樣文本框就看不到了。這是Axure系列的又一篇文章，這幾個組件是9月份做的，本來打算國慶期間把心得寫完的，結(jié)果沉迷3D打印，就拖延了……請關(guān)注我，近期會陸續(xù)推送一系列的Axure個性化定