From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../es/web/api/filereader/readasdataurl/index.html | 68 ++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 files/es/web/api/filereader/readasdataurl/index.html (limited to 'files/es/web/api/filereader/readasdataurl/index.html') diff --git a/files/es/web/api/filereader/readasdataurl/index.html b/files/es/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..a4f7155a70 --- /dev/null +++ b/files/es/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,68 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - Archivos + - Referencia + - metodo +translation_of: Web/API/FileReader/readAsDataURL +--- +

{{APIRef("File API")}}

+ +

El método readAsDataURL es usado para leer el contenido del especificado {{domxref("Blob")}} o {{domxref("File")}}.  Cuando la operación de lectura es terminada, el {{domxref("FileReader.readyState","readyState")}} se convierte en DONE, y el {{event("loadend")}} es lanzado. En ese momento, el atributo {{domxref("FileReader.result","result")}} contiene  la información como una URL representando la información del archivo como una cadena de caracteres codificados en base64.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Parametros

+ +
+
blob
+
El {{domxref("Blob")}} o {{domxref("File")}} desde el cual leer.
+
+ +

Ejemplo

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}
+ +

Resultado en vivo

+ +

{{EmbedLiveSample("Ejemplo", "100%", 240)}}

+ +
Nota: el constructor FileReader()  no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra Posibler solución de compatibilidad para vista previa de imagenes entre navegadores. Ve también este ejemplo más poderoso.
+ +

Especificaciones

+ +

{{page("/en-US/docs/Web/API/FileReader","Specifications")}}

+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Tambien ver

+ + -- cgit v1.2.3-54-g00ecf