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

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