ie6 可以直接顯示本本地路徑的圖片 如: <img src="file://c:/3.jpg" /> ~~~網(wǎng)上都說(shuō)ie7就不支持這種文件系統(tǒng)路徑的url,但測(cè)試 xp ie8還是可以的
ie8+ alphaImageLoader濾鏡方式加載本地路徑的圖片
chrome, firefox, 用dataUrl 或 createObjectURL方法實(shí)現(xiàn)
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>get file input full path</title>
<script type="text/javascript" language='javascript'>
function getFullPath(obj) {
var newPreview = document.getElementById("img");
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
return;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
newPreview.src = window.URL.createObjectURL(obj.files.item(0));
return;
}
newPreview.src = obj.value;return;
}
newPreview.src = obj.value; return;
}
}
</script>
</head>
<body>
<input type="file" onchange="getFullPath(this);" />
<img id="img" alt="" style="width:200px; height:200px;" src="你自己的透明圖片"/>
</body>
</html>
然后 我們來(lái)看看 window.URL.createObjectURL() 到底是什么
創(chuàng)建一個(gè)新的對(duì)象URL,該對(duì)象URL可以代表某一個(gè)指定的File
對(duì)象或Blob
對(duì)象.
objectURL = window.URL.createObjectURL(blob);
blob參數(shù)
是一個(gè)File
對(duì)象或者Blob
對(duì)象.objectURL是生成的
對(duì)象URL.通過(guò)這個(gè)URL,可以獲取到所指定文件的完整內(nèi)容.查看使用對(duì)象URL顯示圖片 js生成圖片預(yù)覽圖后 生成縮略圖 然后上傳縮略圖圖片
在每次調(diào)用createObjectURL()
方 法的時(shí)候,都會(huì)創(chuàng)建一個(gè)新的對(duì)象URL,即使參數(shù)中的這個(gè)對(duì)象已經(jīng)有了自己的對(duì)象URL.在你不需要這些對(duì)象URL的時(shí)候,你應(yīng)該通過(guò)調(diào)用 window.URL.revokeObjectURL()
方法來(lái)釋放它們所占用的內(nèi)容.雖然即使你不主動(dòng)釋放它們,瀏覽 器也會(huì)在當(dāng)前文檔被卸載的時(shí)候替你釋放,不過(guò),考慮到更好的性能和更少的內(nèi)存占用,你應(yīng)該在安全的時(shí)候主動(dòng)施放它們.
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 8 | 4 | 10 | 12 | Nightly build |
聯(lián)系客服