##這是老掉牙的問題吧？
其實這個題目很常見，但我覺得一路走來的心路歷程也算是有些經驗，
而瀏覽器進步的快速，也讓網路上充斥着各種不同的解法，
初學者很容易就掉進這個深淵。回頭看看這幾年走過的路，
也可以由這個問題看出開發者不斷地在跟瀏覽器的能耐做角力，
然後隨著技術的進步，終於讓我有比較理想的解法。
決定記錄下來。
如果只是要找解法的話可以直接看「preview image before upload(html5篇)」。
##Server side solution
還記得n多年前，我剛碰網頁程式設計時，為了做上傳圖片的功能，
我很天真的問了我的前輩：「我可以在上傳之前預覽我選了哪張圖片嗎？」
他想了一下說：「可以啊，就post出去再顯示這張圖片的路徑就好。」
於是我就傻傻的就post出去再回來顯示（現在來看很傻），
想說，恩，也ok啦，也算是有做出我想要的功能。
但很快就發現，如果每次選擇照片都上傳，Server很快就會被塞爆了，
而且反應速度根本就很差，所以最後還是把這個功能給拿掉。
但也從此種下我一直想做出這理想的功能。
##img src=”c://Documents/Pictures/aaa.jpg”
初生之犢不畏虎，或許你對某些技術很熟悉了，很直覺得就會認為「某某功能辦不到，因為這技術blabla沒辦法blabla」
但初學者哪管這麼多，拼命找拼命try，在當時javascript還不紅，瀏覽器只有IE6的年代，
我看到這種方式可以讀入image src，覺得終於有達到我要的需求了，很開心的用這個方式實現這個功能。
##安全性問題
好景不常，當我開始意識到「疑？原來世界上不只有IE6瀏覽器，原來瀏覽器不叫做explorer」時，我發現原來的程式
在Firefox上不能用，我心裡想Firefox不是更標準，更好開發嗎？為什麼這樣的方式不行？查了半天才知道
原來是因為安全性問題(但當時傻乎乎的開發，誰管什麼安全性問題啊，氣死我，難不成又要回到server端解法？)
延伸閱讀：
##Flash solution
雖然我還是不死心，不過Firefox還只是在研究階段，IE能Work就先擋着吧（還真是不求甚解），
然而又過了不久，IE7 出現了，結果連IE7也不能work了，我才比較正視安全性的問題，那好吧，
這功能還是挺有用的，可是怎麼解呢？於是網路上找到有人用flash的方式來解決，不過參考連結我已不復記憶，
只是對當時的我來說，flash好像才是壓箱的武器，網頁的限制，就由它來終結。
接著AJAX紅透半邊天，除了預覽之外，連上傳都要用AJAX的方式來處理，於是就有
swfupload，YUI uploader
之類元件的出現，他們都是用flash的solution然後提供javascript的接口，開發者不用碰到
flash端就可以做複雜的處理，可以做到動態上傳，進度顯示等等很炫(?)的功能。
####不過你知道為什麼可以用flash處理嗎？
|
|
「疑～flash很強大咩！那我可以在上傳之前就先把圖片resize嗎？」
有做過傳統網頁程式的人一定對resize picture很熟悉，而且為了加快瀏覽速度，
一張圖片還會resize成好幾種不同尺寸，多麻煩阿～
所以前端做久了就會想在前端解決，於是我也找到
一個小套件：AgileUploader，
它可以在上傳之前先resize圖片，這可以加快上傳速度減少頻寬量，何樂而不為？
##小結
若考慮相容於舊式瀏覽器（其實就是IE6 7 8），Flash會是最快速的解法，
不用管瀏覽器相容性，因為flash本身就是跨瀏覽器的解法了。
- AJAX上傳圖片：swfupload，YUI uploader
- resize Pictures: AgileUploader
以上在flash還可以hold住的年代都陪伴著我們經過一段苦力的歲月，隨著瀏覽器的進步，
html5的崛起，前端開發者慢慢捨棄flash改用html5的標準來做事情，但是使用者的需求並不會改變，
而且只會更多，跟上傳圖片有關的需求列舉如下：
- 預覽
- resize
- 裁切
- 旋轉
濾鏡
等等，怎麼又冒出這麼多需求？預覽與縮放還沒有太多跟使用者的互動UI，然後crop, rotate, filter等就會有比較複雜的控制UI，
所以說阿，開發者總是不斷的在挑戰瀏覽器的極限，
雖然技術有了革命性的變動，需求卻只會更多不會更少，我們需要的是更快速的做到我們要做的功能。
漸漸地突然發現要Flash做到這麼複雜的功能，又牽扯到很多UI的互動，
這已經不單單是可以靠flash的「部分介入」來完成的事情了。
因此，類似的事情好像又重新上演了。html5的出現揪竟會帶來什麼樣的沖擊呢？
讓我們繼續看下去。
下集：「preview image before upload(html5篇)」。