Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM createObjectURL() method

  • Last Updated : 14 Jul, 2020

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.




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>URL.createObjectURL example</title>
</head>
<body>
  <h1>GeeksforGeeks</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
  • Edge
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :