URL.revokeObjectURL()

admin發表於2020-04-10
Object

此方法用於釋放由 URL.createObjectURL() 建立的物件 URL。

特別說明：靜態方法，無需使用 URL 物件例項呼叫。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
URL.revokeObjectURL(objectURL)

引數解析：

（1）.objectURL：由 URL.createObjectURL() 建立的物件 URL。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
img {
  width: 180px;
  border: 2px dotted green;
}
</style>
<script>  
window.onload = ()=> {
  let input = document.getElementById("file");
  let show = document.getElementById("show");
  input.onchange = ()=>{
    let img = document.createElement("img");
    let objectUrl = URL.createObjectURL(input.files[0]);
    img.onload = function(){
      URL.revokeObjectURL(objectUrl);
    };
    img.src = objectUrl;
    show.appendChild(img);
  }
}
</script>  
</head>  
<body>
<input type="file" id="file" accept="image/*"/>
<div id="show"></div>
</body>  
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202004/10/120730n8uudmsokzopkhyh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當圖片載入完畢後，也就是已經在瀏覽器得到顯示。

此時這個對於 圖片 File 物件的 URL 引用也就不再需要了，通過 URL.revokeObjectURL() 釋放。