input[type='file']選擇圖片時,IE9及其以下版本瀏覽器報錯


 1 var obj = upfile.value
 2 obj.select();
 3 var imgSrc = document.selection.createRange().text; 
 4 var localImagId = document.getElementById("localImag"); //必須設置初始大小 
 5 try{ //IE濾鏡
 6      localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
 7     localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; 
 8 } catch(e) {
 9     alert("您上傳的圖片格式不正確,請重新選擇!"); 
10     return false; 
11 } 

低版本瀏覽器報錯,顯示var imgSrc = document.selection.createRange().text; 這一行有錯誤。控制台顯示錯誤為:SCRIPT5:拒絕訪問。兩個解決方案,分別為客戶端和服務端出路方案。

一、客戶端解決方案
降低IE瀏覽器Internet的安全級別或者將有問題的網站設置為信任站點。
降低IE瀏覽器的安全級別方法:
工具 -> Internet選項 -> 安全 -> Internet區域  -> 該區域的安全級別滑塊滑到最低

添加信任站點方法:

工具 -> Internet選項 -> 安全 -> 受信任站點區域 -> 站點 -> 輸入網址,點擊添加按鈕 
二、服務端解決方案
網上一番搜索之后,找到了低版本的IE造成這個問題的原因:
在IE9下,如果file控件獲得焦點,則document.selection.createRange()拒絕訪問。
針對這個原因,可在document.selection.createRange()方法前使file控件失去焦點即可。因此,也有兩個方案可選。
方案1:直接使file控件失去焦點
針對本人的代碼,可做如下修改
1 var obj = upfile.value
2 obj.select();
3 obj.blur(); //使file控件失去焦點
4 var imgSrc = document.selection.createRange().text; 

方案2:使其他DOM元素獲得焦點

1 var obj = upfile.value
2 obj.select();
3 OtherDOM.focus(); // 使其他元素獲得焦點
4 var imgSrc = document.selection.createRange().text; 

上述兩個方案,方案2適用性較好。原因來自網絡,本人尚未驗證。

因為當網頁中存在iframe框架時,會導致跨域的問題,致使obj.blur()報錯。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM