The createObjectURL() method creates a DOMString containing a URL representing the object given in the parameter of the method. The new object URL represents the specified File object or Blob object.
Note: The URL lifetime is tied to the document in which it was created.
Syntax:
const url = URL.createObjectURL(object);
Parameters:
- object: A File, image, or any other MediaSource object for which object URL is to be created.
Return value: A DOMString containing an object URL of that object.
Example: In this example, we will create an object URL for the image object using this method.
html
<!DOCTYPE html><html><head>Â Â <meta charset="utf-8">Â Â <title>URL.createObjectURL example</title></head><body>Â Â <h1>neveropen</h1>Â Â <input type="file">Â Â <img>Â Â <p class="p">The URL of this image is : </p></body><script>Â Â Â Â var Element = document.querySelector('input');Â Â Â Â var img = document.querySelector('img');Â Â Â Â Element.addEventListener('change', function() {Â Â Â Â Â Â var url = URL.createObjectURL(Element.files[0]);Â Â Â Â Â Â img.src = url;Â Â Â Â Â Â console.log(url);Â Â Â Â Â Â var d=document.querySelector(".p");Â Â Â Â Â Â d.textContent+=url;});</script></html> |
Output: we will select an image from local storage and then the URL of that object will be created.
Before Choosing Image:
After Choosing Image:
Checking the created URL in a new tab:
Supported Browsers:
- Google Chrome 19
- Edge 12
- Firefox 19
- Internet Explorer 10
- Safari 6
- Opera 15
