預覽要上傳的圖片 - 使用JavaScript

就在昨天，我們可愛的使用者提出了一個需求，希望在選取完要上傳的圖檔時，可以預覽要上傳的圖片，並且顯示其原始檔名。為什麼有這種需求呢？因為他們說，有可能資料輸入到一半去忙別的事，再回來時就忘了輸入到哪了。哎呀，問題來啦，該怎麼做咧，老實說，這還是打雜工友甲的我第一次遇到這種需求耶！原本想，是不是可以利用AJAX的方式，在上傳圖檔的地方放個UpdatePanel來做，但是放了UpdatePanel就不能放FileUpload元件啦，所以只能用JavaScript來做囉！

第一步就是先在之間宣告CSS，在CSS中宣告DXImageTransform.Microsoft.AlphaImageLoader這個特殊的MS專屬濾鏡，其中『#newPreview』為下面用來預覽圖片DIV TAG的ID名稱。



再來就是JavaScript的部份啦，基於個人習慣，所以把SHOW圖的部份跟SHOW檔名的部份分開成了兩個JavaScript function。這樣一來，所呈現的結果，好像是對的，可是仔細測過才發現，當再重新按『瀏覽』選其它圖時，圖下方的檔名並不會跟著換！真是令人感到很煩，怎麼會這樣呢？所以接下來再換個寫法。

換個寫法，嘿嘿，別以為我只是把Javascript的位子換了，然後換了呼叫的方式而已哦，要仔細看看哦！我把處理檔名的function中的document.getElementById("Label2").outerText改成了document.getElementById("Label2").innerHTML就這樣，檔名就跟著改啦！所以呢，這種詭異的需求總算完成了。

當然啦，這可不是我一個人想出來的，要感謝我們辛苦的Judge老大啦，一邊要陪著剛生產完的老婆，一邊要抱小孩，還得幫工友甲想問題，所以此篇文章的最大功臣就是他啦~~