許多Web應用程序需要在前端處理文件輸入，或者將文件上傳到后端。

在這篇文章中，我們來看看如何使用object URL來引用可以使用DOM文件對象引用的數據。

使用object URLs

我們可以調用 URL.createObjectURL 來從文件對象中創建一個URL字符串對象，方法如下。

const objectURL = window.URL.createObjectURL(fileObj);

然后，我們可以在URL字符串對象上調用 revokeURL 以從內存中釋放URL資源：

URL.revokeObjectURL(objectURL);

使用object URLs 顯示圖片

例如，我們可以使用 createObjectURL 方法在 img 元素中顯示選定的圖像文件，如下所示。

首先，我們編寫以下HTML：

然后，我們可以編寫以下代碼來偵聽文件輸入的change事件，然后使用 createObjectURL 設置 img 元素的 src 屬性，如下所示：

const fileInput = document.querySelector('input');const img = document.querySelector('img');fileInput.onchange = () => { const file = fileInput.files[0]; img.src = URL.createObjectURL(file); img.onload = () => { URL.revokeObjectURL(img.src); }}

在上面的代碼中，我們在選定的文件對象 file 上調用了 createObjectURL 來創建可以設置為 src 屬性值的URL。然后，在加載圖像時，我們調用 revokeObjectURL 清除用于創建URL的資源。

使用object URLs 顯示PDF

我們還可以使用object URL來顯示PDF。我們使用相同的 crateObjectURL 方法，但將其設置為 iframe 的URL而不是img元素。

例如，我們可以編寫以下HTML：

然后，我們可以將 src 屬性設置為PDF對象URL的iframe，如下所示：

const fileInput = document.querySelector('input');const iframe = document.querySelector('iframe');fileInput.onchange = () => { const file = fileInput.files[0]; const objUrl = URL.createObjectURL(file); iframe.setAttribute('src', objUrl); URL.revokeObjectURL(objUrl);}

我們使用 createObjectURL 和上傳的PDF文件來創建Object URL字符串。然后我們可以為其設置 src 屬性。然后，PDF將顯示在Firefox的iframe中。

將 object URLs 與其他文件類型一起使用

Object URL也可以與其他文件類型一起使用。例如，我們可以選擇一個視頻文件并通過編寫以下代碼來播放它。首先，我們編寫以下HTML代碼：

然后，要播放從文件輸入中選擇的視頻文件，我們編寫：

const fileInput = document.querySelector('input');const video = document.querySelector('video');fileInput.onchange = async () => { const file = fileInput.files[0]; const objUrl = URL.createObjectURL(file); video.src = objUrl; await video.play(); URL.revokeObjectURL(objUrl);}

在上面的代碼中，我們有一個異步函數，該函數從選定的視頻文件創建Object URL。然后，將Object URL設置為video元素的src屬性。

然后，我們調用視頻 play 以播放視頻。 play 方法返回一個Promise，因此我們必須添加一個 await 等待該Promise的解決。

完成此操作后，我們可以在Object URL上調用 revokeObjectURL 以釋放資源。

總結

我們可以創建Object URL并將其設置為各種元素的src屬性，以顯示或播放它們。在大多數瀏覽器中，它都可以處理圖像，音頻和視頻。

---

如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。

私信回復：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！

總結

以上是生活随笔為你收集整理的jsp可以使用iframe_使用 JavaScript object URLs，可以处理图像、音频和视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。