El método createObjectURL() crea un DOMString que contiene una URL que representa el objeto dado en el parámetro del método. La URL del nuevo objeto representa el objeto de archivo o el objeto de blob especificado.
Nota: la vida útil de la URL está vinculada al documento en el que se creó.
Sintaxis:
const url = URL.createObjectURL(object);
Parámetros:
- objeto: un archivo, una imagen o cualquier otro objeto de MediaSource para el que se va a crear la URL del objeto.
Valor de retorno: un DOMString que contiene una URL de objeto de ese objeto.
Ejemplo: en este ejemplo, crearemos una URL de objeto para el objeto de imagen utilizando este método.
html
<!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>
Salida: seleccionaremos una imagen del almacenamiento local y luego se creará la URL de ese objeto.
Antes de elegir la imagen:
Después de elegir la imagen:
Verificando la URL creada en una nueva pestaña:
Navegadores compatibles:
- Google cromo 19
- Borde 12
- Firefox 19
- explorador de Internet 10
- Safari 6
- Ópera 15