createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽

更新時(shí)間：2019年09月30日 08:18:05 作者：stephenykk

這篇文章主要為大家詳細(xì)介紹了createObjectURL方法實(shí)現(xiàn)本地圖片預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

ie6 可以直接顯示本本地路徑的圖片如： <img src="file://c:/3.jpg" /> ~~~網(wǎng)上都說ie7就不支持這種文件系統(tǒng)路徑的url，但測試 xp ie8還是可以的

ie8+ alphaImageLoader濾鏡方式加載本地路徑的圖片

chrome, firefox, 用dataUrl 或 createObjectURL方法實(shí)現(xiàn)

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/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>

然后我們來看看 window.URL.createObjectURL() 到底是什么

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.通過這個(gè)URL,可以獲取到所指定文件的完整內(nèi)容.

示例

查看使用對(duì)象URL顯示圖片.

附注

在每次調(diào)用createObjectURL()方法的時(shí)候,都會(huì)創(chuàng)建一個(gè)新的對(duì)象URL,即使參數(shù)中的這個(gè)對(duì)象已經(jīng)有了自己的對(duì)象URL.在你不需要這些對(duì)象URL的時(shí)候,你應(yīng)該通過調(diào)用 window.URL.revokeObjectURL()方法來釋放它們所占用的內(nèi)容.雖然即使你不主動(dòng)釋放它們,瀏覽器也會(huì)在當(dāng)前文檔被卸載的時(shí)候替你釋放,不過,考慮到更好的性能和更少的內(nèi)存占用,你應(yīng)該在安全的時(shí)候主動(dòng)施放它們.

瀏覽器兼容性