js上傳圖片預覽,相容IE6以上各大主流瀏覽器
上傳圖片專案中很常用的功能。最近正好一直在研究,正好在這分享出來!相信很多人在做上傳的時候也會碰到這樣的問題,想通過前端實現圖片的預覽!網上大多數的做法是FLASH,但是呢因為本人不會FLASH 哈哈,所以還是從JS來想辦法了!
1、首先我想到的辦法是在file控制元件的change事件中獲取檔案的路徑來實現預覽,,但是事實告訴我們這樣是不行的。IE6、7、8、9這些瀏覽器中可以獲取完整的路徑,但是Firefox、Chrome下卻獲取不了完整路徑。所以此路不通了!
2、於是忽我就一番百度、谷歌上網找了大量資料,終於讓我在谷歌找到了程式碼。
function filechange(file) { if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function (evt) { showimg(evt.target.result); }; reader.readAsDataURL(file.files[0]); } else { file.select(); var src = document.selection.createRange().text; showimg(src); } }
基實現原理是這樣,如果是支援HTML5的瀏覽器使用FileReader這個物件來讀取圖片的Base64,其他IE系列的瀏覽器則獲取file.value來讀取圖片地址。貌似這樣其他上各種瀏覽器都是可以的,但是經過各種測試發現,還是有問題!IE9、360、QQ等有些瀏覽器下會報JS安全錯誤!
3、於是又谷歌、百度一找,還是找到了解決方案。IE9下直接使用file.select(); document.selection.createRange().text;來獲取地址的時候,瀏覽器預設是拒絕的。網上說到的解決方案是:a、如果巢狀在iframe裡面 file.select()後面加上window.parent.document.body.focus(); b、如果沒有巢狀在iframe裡面 file.select();後面加上 file.blur(); 好了,這樣就在各種瀏覽器下都能取到圖片了,也差不多了!下面貼上程式碼
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>真正實現相容IE6以上主流瀏覽器-上傳圖片預覽(注意請不用IE Tester測試,IE Tester下input file完全點不了,我是直接用虛擬機器真實IE測試)</title> <link href="demo.css" rel="stylesheet" /> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.11.1.min.js"></script> </head> <body> <div id="tempbox"> <img id="imgViewTemp" width="120" height="120" src="none3.gif" alt="" /> </div> <div class="box"> <input type="file" class="typefile" onchange="filechange(this)" /> <a href="javascript:;"></a> <div></div> <img src="none3.gif" alt="" /> </div> </body> </html> <script type="text/javascript"> var configs = { width: 120, height: 120 };//縮圖120*120 function filechange(file) { if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function (evt) { $(file).parent().find('img').attr('src', evt.target.result).show(); addSel(); }; reader.readAsDataURL(file.files[0]); } else { var filterAlpha = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; file.select(); if (navigator.userAgent.indexOf('MSIE 9.0') || navigator.userAgent.indexOf('MSIE 10.0')) { if (window.location.href === window.parent.location.href) { //不是巢狀在iframe中直接執行file.blur file.blur(); } else { //被套在iframe中的時候需要給頁面上其他的DIV或者BUTTON執行focus //$(file).parent().trigger('focus'); window.parent.document.body.focus(); } } var src = document.selection.createRange().text; var tempImage = document.getElementById('imgViewTemp'); tempImage.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; var rect = preViewResize(configs.width, configs.height, tempImage.offsetWidth, tempImage.offsetHeight); $(file).parent().find('div').css({ width: rect.width, height: rect.height, 'margin-top': rect.top, 'margin-left': rect.left, filter: filterAlpha + src + '"' }).show(); addSel(); } } function addSel() { $('body').append('<div class="box"><input type="file" class="typefile" onchange="filechange(this)" /><a href="javascript:;"></a><div></div><img src="" alt="" /></div>'); } </script>
結尾:這裡有幾個需要注意的地方
1、input file 控制元件必須要使用者自己點選觸發(上圖中CSS程式碼用定位實現了使用者點選A標籤觸發file事件,之前我是用JS觸發的有問題),如果是用JS觸發的file事件瀏覽器也拒絕。
2、在IE10以下版本中要使用濾鏡,不然也無法預覽!
3、在此申明,請不要用IETester來測相容性。我發現file控制元件在IETester裡都不能用了。以上程式碼我全是在虛擬機器真實瀏覽器環境中測試的!
好了先就說這些吧!這裡有預覽地址!大家有發現BUG的也可以給我回復,感謝大家來找BUG一起完善程式碼。好東西要大家分享嘛!
第一次發文章,歡迎大家來噴!
由老廖最後編輯於:5年前
內容均為作者獨立觀點,不代表八零IT人立場,如涉及侵權,請及時告知。
相關文章
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- JS相容各個瀏覽器的本地圖片上傳即時預覽效果JS瀏覽器地圖
- css+js美化下拉框(相容IE6、7、8以上主流瀏覽器)CSSJS瀏覽器
- js圖片上傳預覽JS
- Java上傳檔案到遠端伺服器和瀏覽器預覽圖片Java伺服器瀏覽器
- vue圖片預覽上傳Vue
- 菜鳥學JS(一)——上傳圖片之上傳前預覽圖片JS
- input file上傳圖片預覽
- angularjs 實現圖片上傳實時預覽AngularJS
- javauploadify上傳圖片並預覽Java
- 主流瀏覽器核心及JS引擎瀏覽器JS
- jQuery圖片上傳前先在本地預覽jQuery
- JXImageBrowser (圖片瀏覽器)瀏覽器
- 滾動滑鼠縮放圖片相容所有瀏覽器瀏覽器
- 各大瀏覽器滾動條相容性問題瀏覽器
- 後門病毒通過下載站傳播 全面劫持各大主流瀏覽器瀏覽器
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- 建立相容IE6瀏覽器的ajax請求物件瀏覽器物件
- jsp+springmvc實現檔案上傳、圖片上傳和及時預覽圖片JSSpringMVC
- js相容所有主流瀏覽器建立XMLhttpRequest物件例項程式碼JS瀏覽器XMLHTTP物件
- iOS圖片瀏覽器 - XLPhotoBrowser(類似微信多圖片瀏覽效果)iOS瀏覽器
- 上傳圖片本地預覽例項程式碼
- 圖片上傳預覽效果程式碼例項
- PHP仿微信多圖片預覽上傳功能PHP
- IE瀏覽器相容瀏覽器
- parseInt()瀏覽器相容瀏覽器
- 9:瀏覽器相容瀏覽器
- jquery1.9以上版本判斷瀏覽器是否為IE6jQuery瀏覽器
- CSShack瀏覽器相容一覽表CSS瀏覽器
- js 圖片瀏覽外掛原生JS
- 主流瀏覽器及其核心瀏覽器
- FileReader()讀取檔案、圖片上傳預覽
- vue.js 多圖上傳,並可預覽Vue.js
- iSee Pro for Mac圖片瀏覽器Mac瀏覽器
- GraphicConverter for Mac(圖片瀏覽器)Mac瀏覽器
- 幻燈片式圖片瀏覽器瀏覽器
- 主流瀏覽器相容性問題與解決方案瀏覽器
- 不同瀏覽器下圖片滾動效果的js瀏覽器JS