解決chrome和firefox中檔案上傳本地路徑隐藏的問題

如果想上傳一張圖檔，在頁面中實作預覽，可以擷取檔案的上傳路徑，然後在一個<img/>裡面顯示，檔案的上傳路徑就是<input type="file"/>的value。在IE下是value是等于本地路徑的，然而，在chrome和firefox中，出于安全考慮，路徑卻是匿名，比如，上傳E盤中的readme.txt，得到的value卻是C:/fakepath/readme.txt。

要在頁面顯示上傳的圖檔，可以先上傳到伺服器，然後再下載下傳下來回避這個問題，但這樣會有多餘的流量，不是好的做法。

好在我找到了解決的辦法：

<code><</code><code>html</code> <code>xmlns</code><code>=</code><code>"http://www.w3.org/1999/xhtml"</code> <code>></code>

<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=utf-8"</code> <code>/> </code>

<code><</code><code>title</code><code>>本地圖檔預覽</</code><code>title</code><code>> </code>

<code><</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>></code>

<code>#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}</code>

<code>#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}</code>

<code></</code><code>style</code><code>></code>

<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code>function previewImage(file)</code>

<code> </code><code>var MAXWIDTH = 100;</code>

<code> </code><code>var MAXHEIGHT = 100;</code>

<code> </code><code>var div = document.getElementById('preview');</code>

<code> </code><code>if (file.files && file.files[0])</code>

<code> </code><code>div.innerHTML = '<</code><code>img</code> <code>id</code><code>=</code><code>imghead</code><code>>';</code>

<code> </code><code>var img = document.getElementById('imghead');</code>

<code> </code><code>img.onload = function(){</code>

<code> </code><code>var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);</code>

<code> </code><code>img.width = rect.width;</code>

<code> </code><code>img.height = rect.height;</code>

<code> </code><code>img.style.marginLeft = rect.left+'px';</code>

<code> </code><code>img.style.marginTop = rect.top+'px';</code>

<code> </code><code>var reader = new FileReader();</code>

<code> </code><code>reader.onload = function(evt){img.src = evt.target.result;}</code>

<code> </code><code>reader.readAsDataURL(file.files[0]);</code>

<code> </code><code>var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';</code>

<code> </code><code>file.select();</code>

<code> </code><code>var src = document.selection.createRange().text;</code>

<code> </code><code>div.innerHTML = '<</code><code>img</code> <code>id</code><code>=</code><code>imghead</code><code>>';</code>

<code> </code><code>var img = document.getElementById('imghead');</code>

<code> </code><code>img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;</code>

<code> </code><code>var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);</code>

<code> </code><code>status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);</code>

<code> </code><code>div.innerHTML = "<</code><code>div</code> <code>id</code><code>=</code><code>divhead</code> <code>style</code><code>=</code><code>'width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'</code><code>></</code><code>div</code><code>>";</code>

<code>function clacImgZoomParam( maxWidth, maxHeight, width, height ){</code>

<code> </code><code>var param = {top:0, left:0, width:width, height:height};</code>

<code> </code><code>if( width>maxWidth || height>maxHeight )</code>

<code> </code><code>rateWidth = width / maxWidth;</code>

<code> </code><code>rateHeight = height / maxHeight;</code>

<code> </code><code>if( rateWidth > rateHeight )</code>

<code> </code><code>param.width = maxWidth;</code>

<code> </code><code>param.height = Math.round(height / rateWidth);</code>

<code> </code><code>param.width = Math.round(width / rateHeight);</code>

<code> </code><code>param.height = maxHeight;</code>

<code> </code><code>param.left = Math.round((maxWidth - param.width) / 2);</code>

<code> </code><code>param.top = Math.round((maxHeight - param.height) / 2);</code>

<code> </code><code>return param;</code>

<code></</code><code>script</code><code>> </code>

<code><</code><code>div</code> <code>id</code><code>=</code><code>"preview"</code><code>></code>

<code> </code><code><</code><code>img</code> <code>id</code><code>=</code><code>"imghead"</code> <code>width</code><code>=</code><code>100</code> <code>height</code><code>=</code><code>100</code> <code>border</code><code>=</code><code>0</code> <code>src</code><code>=</code><code>'../images/head01_big.jpg'</code><code>></code>

<code> </code><code><</code><code>input</code> <code>type</code><code>=</code><code>"file"</code> <code>onchange</code><code>=</code><code>"previewImage(this)"</code> <code>/> </code>

調用FileReader的readAsDataURL接口，将啟動異步加載檔案内容，通過給reader監聽一個onload事件，将資料加載完畢後，在onload事件進行中，通過reader的result屬性即可獲得檔案内容。

本文轉自 iampomelo 51CTO部落格，原文連結：http://blog.51cto.com/iampomelo/1652928，如需轉載請自行聯系原作者

解決chrome和firefox中檔案上傳本地路徑隐藏的問題

繼續閱讀

使用RAP2和Mock.JS實作Web API接口的資料模拟和測試

從部落格園遷移到簡書平台

基于EasyUI的Web應用程式及過去一年的總結

玩轉Tornado架構Tornado簡介Tornado與Django的比較使用TornadoTornado的執行流程快速開始Tornado路由系統模闆引擎靜态緩存公共元件XSS跨站腳本攻擊與CSRF跨域僞造請求Cookie與Session檔案上傳

【異常處理】org.hibernate.LazyInitializationException: could not initialize proxy - no Session

Django web 架構學習之旅（3）《Django Web 架構》

荷小魚 x mPaaS | 借助 H5 容器改善 App 白屏、浏覽器相容問題

AI驅動的Web App開發實戰

pager-taglib使用指南

django-web開發架構-視圖-04視圖URLconf

django-web開發架構-模闆-05使用模闆去除模闆的寫死Render簡寫總結

Django web架構學習之旅（4）《Django Web 架構》

django-web開發架構簡介-01主要知識點介紹建立虛拟環境（Ubuntu）安裝django建立項目目錄說明

mPaaS 月度小報 | 3月發生的大事件

Android WebView 緻安卓應用閃退，mPaaS 助你規避這波 Bug

解讀 WebRTC 音頻 NetEQ 及優化實踐為什麼要 “白話” NetEQ?丢包、抖動和優化的了解NetEQ 及相關子產品NetEQ 内部子產品NetEQ 相關子產品優化點總結