js 上傳圖片預(yù)覽問題
更新時(shí)間:2010年12月06日 20:22:04 作者:
我們寫網(wǎng)頁(yè)的時(shí)候一般的用IE進(jìn)行開發(fā),一般的人都是按照IE進(jìn)行些程序,做網(wǎng)站的時(shí)候遇到瀏覽器兼容問題是非常煩躁的事情。
最近也經(jīng)常遇到瀏覽器兼容的問題,昨天遇到上傳圖片預(yù)覽問題,發(fā)現(xiàn)IE8和火狐不能顯示,弄了很久,早上終于解決了很高興。故跟大家分享下,我也多是網(wǎng)上找的,自己總結(jié)的一下,希望對(duì)大家有點(diǎn)幫助。
我們一般根據(jù)IE6、IE7進(jìn)行開發(fā)的時(shí)候?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)上找了很多東西都無(wú)法實(shí)現(xiàn),首先要獲得
在火狐上問題很多,在網(wǎng)上找了很多東西都無(wú)法實(shí)現(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),后來(lái)發(fā)現(xiàn)有人說(shuō)要在火狐顯示本地圖片要在前面加"file:///"
if (!document.all) {
img = img.replace(/\\/g, "/");
img = "file:///" + img
}
這樣如果是頁(yè)面上放個(gè)圖片是可以顯示,不過(guò)前提條件是不能放在IIS上,我的網(wǎng)站是部署在IIS上的這樣就算我直接放個(gè)圖片地址是本地圖片也顯示不了,所有我有本郁悶到了,而且很多人都說(shuō)火狐有安全設(shè)置不能預(yù)覽本地圖片,我差點(diǎn)就放棄了。
最后在網(wǎng)上在到一個(gè)可以預(yù)覽的例子,仔細(xì)分析發(fā)現(xiàn)原來(lái)要在火狐上實(shí)現(xiàn)預(yù)覽圖片其實(shí)代碼也很簡(jiǎn)單:
document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();
我把它的路徑彈出了看,發(fā)現(xiàn)是一串很長(zhǎng)的東西,好像是制定的圖片類型等等,不過(guò)總算是解決了
我們一般根據(jù)IE6、IE7進(jìn)行開發(fā)的時(shí)候?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)上找了很多東西都無(wú)法實(shí)現(xiàn),首先要獲得
在火狐上問題很多,在網(wǎng)上找了很多東西都無(wú)法實(shí)現(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),后來(lái)發(fā)現(xiàn)有人說(shuō)要在火狐顯示本地圖片要在前面加"file:///"
復(fù)制代碼 代碼如下:
if (!document.all) {
img = img.replace(/\\/g, "/");
img = "file:///" + img
}
這樣如果是頁(yè)面上放個(gè)圖片是可以顯示,不過(guò)前提條件是不能放在IIS上,我的網(wǎng)站是部署在IIS上的這樣就算我直接放個(gè)圖片地址是本地圖片也顯示不了,所有我有本郁悶到了,而且很多人都說(shuō)火狐有安全設(shè)置不能預(yù)覽本地圖片,我差點(diǎn)就放棄了。
最后在網(wǎng)上在到一個(gè)可以預(yù)覽的例子,仔細(xì)分析發(fā)現(xiàn)原來(lái)要在火狐上實(shí)現(xiàn)預(yù)覽圖片其實(shí)代碼也很簡(jiǎn)單:
復(fù)制代碼 代碼如下:
document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();
我把它的路徑彈出了看,發(fā)現(xiàn)是一串很長(zhǎng)的東西,好像是制定的圖片類型等等,不過(guò)總算是解決了
您可能感興趣的文章:
- JS實(shí)現(xiàn)上傳圖片的三種方法并實(shí)現(xiàn)預(yù)覽圖片功能
- js實(shí)現(xiàn)圖片上傳并預(yù)覽功能
- js實(shí)現(xiàn)上傳圖片預(yù)覽的方法
- 上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
- js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
- Javascript圖片上傳前的本地預(yù)覽實(shí)例
- js圖片上傳前預(yù)覽功能(兼容所有瀏覽器)
- js實(shí)現(xiàn)圖片上傳預(yù)覽原理分析
- JS上傳前預(yù)覽圖片實(shí)例
- 如何利用原生JS實(shí)現(xiàn)圖片預(yù)覽加上傳(前后端交互)
相關(guān)文章
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼 img.src
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼,IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無(wú)效,只能通過(guò)div來(lái)完成2012-03-03js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)
js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)...2007-03-03彈出自適應(yīng)圖片大小的窗口彈出窗口根據(jù)圖片大小,自動(dòng)判斷高和寬。
彈出自適應(yīng)圖片大小的窗口彈出窗口根據(jù)圖片大小,自動(dòng)判斷高和寬。...2006-12-12非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
一個(gè)效果如果沒有一個(gè)合理的布局,是很難作出來(lái)的,所以布局是非常重要的基礎(chǔ)! 下邊的效果,是試著假設(shè)在布局我無(wú)法改的情況下,能過(guò)外邊的CSS或Javascript來(lái)實(shí)現(xiàn)一個(gè)滑動(dòng)圖片效果!2009-04-04