溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用createObjectURL怎么實(shí)現(xiàn)一個本地圖片預(yù)覽功能

發(fā)布時間：2021-04-19 17:14:08 來源：億速云 閱讀：215 作者：Leah 欄目：web開發(fā)

使用createObjectURL怎么實(shí)現(xiàn)一個本地圖片預(yù)覽功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

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=""  src="你自己的透明圖片"/>
</body>
</html>

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

window.URL.createObjectURL

概述

創(chuàng)建一個新的對象URL,該對象URL可以代表某一個指定的File對象或Blob對象.

語法

objectURL = window.URL.createObjectURL(blob);

  • blob參數(shù)是一個File對象或者Blob對象.

  • objectURL是生成的對象URL.通過這個URL,可以獲取到所指定文件的完整內(nèi)容.

示例

查看使用對象URL顯示圖片.

附注

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

瀏覽器兼容性

使用createObjectURL怎么實(shí)現(xiàn)一個本地圖片預(yù)覽功能

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手