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è)新的對象URL,該對象URL可以代表某一個(gè)指定的File對象或Blob對象.

語法

objectURL = window.URL.createObjectURL(blob);

blob參數(shù)是一個(gè)File對象或者Blob對象.
objectURL是生成的對象URL.通過這個(gè)URL,可以獲取到所指定文件的完整內(nèi)容.

示例

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

附注

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

瀏覽器兼容性

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類的時(shí)候，不需要手動(dòng)去寫require來導(dǎo)入這個(gè)class.php文件，程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下
2017-12-12
JavaScript中promise.all和promise.race的區(qū)別詳解
Promise.all和Promise.race是JavaScript的兩種Promise處理方法,Promise.all要求所有Promise對象成功完成才返回成功,若有一個(gè)失敗則整體失敗,Promise.race返回第一個(gè)完成的Promise結(jié)果,需要的朋友可以參考下
2024-09-09
js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作
這篇文章主要為大家詳細(xì)介紹了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
千分位數(shù)字格式化(用逗號隔開代碼已做了修改支持0-9位逗號隔開)的JS代碼
這篇文章主要介紹了千分位數(shù)字格式化的JS代碼，有需要的朋友可以參考一下
2013-12-12
五個(gè)基于JS實(shí)現(xiàn)的炫酷登錄頁面
本文為大家準(zhǔn)備了五個(gè)基于HTML+CSS+JS實(shí)現(xiàn)的酷炫登錄頁面的示例代碼，文中的頁面效果都很好看，需要的小伙伴可以參考一下
2022-04-04
js 實(shí)現(xiàn)瀏覽歷史記錄示例
這篇文章主要介紹了如何使用js實(shí)現(xiàn)瀏覽歷史記錄,需要的朋友可以參考下
2014-04-04
這篇文章主要介紹了javascript與Python快速排序?qū)嵗龑Ρ?實(shí)例講述了javascript與Python實(shí)現(xiàn)快速排序的簡單實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08