上傳圖檔預覽

圖檔預覽有兩種方式：一種是本地預覽，一種是先上傳到伺服器，然後再發送到用戶端預覽。

這裡說的是本地預覽。

1、思路

   将所選圖檔的路徑賦給<img>标簽的src屬性，為此就要擷取檔案路徑。

出于安全性的考慮，許多浏覽器上傳檔案時屏蔽了真實的本地檔案路徑，比如在360中你會看到這樣的：C:\fakepath\a.jpg

是以，重點在于如何在不同浏覽器中取上傳檔案路徑。

2、代碼

<a href="http://s3.51cto.com/wyfs02/M02/24/EB/wKiom1NWbebRBgBgAAWJgPPEynY655.jpg" target="_blank"></a>

3、說明

   （1）window.URL表示Firefox，window.webkitURL表示Chrome

   （2）在ie9和ie10中運作時，會提示說IE浏覽器限制了這個頁面的腳本運作，問是否允許運作，要運作才能開到效果，

   （3）關于在IE浏覽器中暴露的這個問題，筆者也沒有找到比較好的方法，雖然網上說在obj.select();後調用obj.blur();

使其失去焦點但是仍然不行，無奈。

blob表示二進制檔案

   （5）上傳檔案的時候傳到伺服器的不是檔案路徑，而是這個檔案，伺服器端通過request讀取這個檔案流到伺服器端，

絕不是先得到這個檔案路徑，然後再通過路徑讀取檔案。可以通過火狐浏覽器中用Firebug檢視。

   （6）可以用Flash調用js的方式實作預覽，這樣不用考慮浏覽器之間的差異了。

4、測試

   IE9、FF、Chrome、360測試通過

5、參考

<a href="http://www.iunbug.com/archives/2012/06/05/254.html" target="_blank">http://www.iunbug.com/archives/2012/06/05/254.html</a>

<a href="http://www.iunbug.com/page/3" target="_blank">http://www.iunbug.com/page/3</a>

<a href="http://stackoverflow.com/questions/10529476/javascript-window-url-is-undefined-in-function" target="_blank">http://stackoverflow.com/questions/10529476/javascript-window-url-is-undefined-in-function</a>

<a href="http://leelei.blog.51cto.com/856755/409675" target="_blank">http://leelei.blog.51cto.com/856755/409675</a>

本文轉自    手不要亂摸      51CTO部落格，原文連結:

http://blog.51cto.com/5880861/1400809