js 上傳圖片預(yù)覽問題
更新時間：2010年12月06日 20:22:04 作者：
我們寫網(wǎng)頁的時候一般的用IE進行開發(fā)，一般的人都是按照IE進行些程序，做網(wǎng)站的時候遇到瀏覽器兼容問題是非常煩躁的事情。
最近也經(jīng)常遇到瀏覽器兼容的問題，昨天遇到上傳圖片預(yù)覽問題，發(fā)現(xiàn)IE8和火狐不能顯示，弄了很久，早上終于解決了很高興。故跟大家分享下，我也多是網(wǎng)上找的，自己總結(jié)的一下，希望對大家有點幫助。
我們一般根據(jù)IE6、IE7進行開發(fā)的時候?qū)憟D片預(yù)覽的代碼是：
document.getElementById("img").src = document.getElementById("file").value;
還有一種方式
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;" id="div1"></div>
<script type="javascript">
document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value;
</script>
IE8
在IE8和火狐上直接用戶控件.value得到的只是文件名稱而不是完整路徑
var isIE = (document.all) ? true : false;
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
var file = document.getElementById("file");
if (isIE7 || isIE8) {
file.select();
img = document.selection.createRange().text;
document.selection.empty();
document.getElementById("img").src = img;
}
火狐
在火狐上問題很多，在網(wǎng)上找了很多東西都無法實現(xiàn)，首先要獲得
在火狐上問題很多，在網(wǎng)上找了很多東西都無法實現(xiàn)。
1。首先要獲得上傳問題的完整路徑，用下面的方法是可以得完整路徑
if (navigator.userAgent.indexOf("Firefox") != -1) {
try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
}
img = document.getElementById("file").value;
}
2。但直接這樣給圖片修改路徑(src)沒有反應(yīng)，后來發(fā)現(xiàn)有人說要在火狐顯示本地圖片要在前面加"file:///"
if (!document.all) {
img = img.replace(/\\/g, "/");
img = "file:///" + img
}
這樣如果是頁面上放個圖片是可以顯示，不過前提條件是不能放在IIS上，我的網(wǎng)站是部署在IIS上的這樣就算我直接放個圖片地址是本地圖片也顯示不了，所有我有本郁悶到了，而且很多人都說火狐有安全設(shè)置不能預(yù)覽本地圖片，我差點就放棄了。
最后在網(wǎng)上在到一個可以預(yù)覽的例子，仔細分析發(fā)現(xiàn)原來要在火狐上實現(xiàn)預(yù)覽圖片其實代碼也很簡單：
document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();
我把它的路徑彈出了看，發(fā)現(xiàn)是一串很長的東西，好像是制定的圖片類型等等，不過總算是解決了
我們一般根據(jù)IE6、IE7進行開發(fā)的時候?qū)憟D片預(yù)覽的代碼是：
復(fù)制代碼 代碼如下:
document.getElementById("img").src = document.getElementById("file").value;
還有一種方式
復(fù)制代碼 代碼如下:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;" id="div1"></div>
<script type="javascript">
document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value;
</script>
IE8
在IE8和火狐上直接用戶控件.value得到的只是文件名稱而不是完整路徑
復(fù)制代碼 代碼如下:
var isIE = (document.all) ? true : false;
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
var file = document.getElementById("file");
if (isIE7 || isIE8) {
file.select();
img = document.selection.createRange().text;
document.selection.empty();
document.getElementById("img").src = img;
}
火狐
在火狐上問題很多，在網(wǎng)上找了很多東西都無法實現(xiàn)，首先要獲得
在火狐上問題很多，在網(wǎng)上找了很多東西都無法實現(xiàn)。
1。首先要獲得上傳問題的完整路徑，用下面的方法是可以得完整路徑
復(fù)制代碼 代碼如下:
if (navigator.userAgent.indexOf("Firefox") != -1) {
try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
}
img = document.getElementById("file").value;
}
2。但直接這樣給圖片修改路徑(src)沒有反應(yīng)，后來發(fā)現(xiàn)有人說要在火狐顯示本地圖片要在前面加"file:///"
復(fù)制代碼 代碼如下:
if (!document.all) {
img = img.replace(/\\/g, "/");
img = "file:///" + img
}
這樣如果是頁面上放個圖片是可以顯示，不過前提條件是不能放在IIS上，我的網(wǎng)站是部署在IIS上的這樣就算我直接放個圖片地址是本地圖片也顯示不了，所有我有本郁悶到了，而且很多人都說火狐有安全設(shè)置不能預(yù)覽本地圖片，我差點就放棄了。
最后在網(wǎng)上在到一個可以預(yù)覽的例子，仔細分析發(fā)現(xiàn)原來要在火狐上實現(xiàn)預(yù)覽圖片其實代碼也很簡單：
復(fù)制代碼 代碼如下:
document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();
我把它的路徑彈出了看，發(fā)現(xiàn)是一串很長的東西，好像是制定的圖片類型等等，不過總算是解決了
相關(guān)文章
js小技巧--自動隱藏紅叉叉...2007-08-08
下面的演示可能存在一些與頁面JS沖突的問題。如果想要演示或者完整的放大效果 html2010-05-05
照片各部分的彩色與黑白交替更換...2007-02-02
用javascript實現(xiàn)的圖片馬賽克后顯示并切換加文字功能
用javascript實現(xiàn)的圖片馬賽克后顯示并切換加文字功能...2007-04-04
一個跟隨鼠標的圖片放大效果，與FF兼容...2007-04-04
圖片放大鏡效果代碼...2007-11-11
有時候我們的圖片上傳等功能，需要驗證客戶端的圖片大小，比較只能上傳小于100K的圖片，這里客戶端先簡單的驗證下。2010-04-04
一段非常簡單的讓圖片自動切換js代碼...2006-11-11
這個效果挺實用，當把鼠標放到一幅靜止的圖片上，圖片的四周邊框會出現(xiàn)陰影，具有立體感的效果，代碼是第二次修正，能適應(yīng)大小不同的圖片，值得大家嘗試一用哦。2009-12-12
javascript實現(xiàn)的三維正方體(兼容ie7,ff)
2008-02-02